@font-face{font-family:"Sora";src:url(fonts/sora.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  --bg:#0B0F14; --surface:#1F2937; --text:#C8D5E1; --head:#EEF3F8; --muted:#8B9BAE; --accent:#3B82F6; --wm:#121A24; --logo:#C8D5E1;
  --sans:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html[data-theme="light"]{--bg:#F5F7FA; --surface:#CBD5E1; --text:#243140; --head:#0B0F14; --muted:#4A5868; --accent:#2563EB; --wm:#DEE6EF; --logo:#0B0F14; color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--sans)}
a{color:var(--accent);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,pre:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.top{max-width:1120px;margin:0 auto;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1.25rem;position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--logo);text-decoration:none;font-weight:700;font-size:1.3rem;letter-spacing:-.03em}
.mark{width:30px;height:30px;fill:currentColor;stroke:currentColor;stroke-width:5;stroke-linejoin:round}
nav{margin-left:auto}
nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.6rem;font-size:.86rem}
nav a{color:var(--text);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--head)}
nav a[aria-current="page"]{color:var(--head);border-bottom-color:var(--accent)}
nav a.pill{padding:.4rem 1.05rem;border:1px solid var(--surface);border-radius:999px}
nav a.pill:hover,nav a.pill[aria-current="page"]{border-color:var(--accent)}
.theme{display:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--surface);background:transparent;color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.js .theme{display:inline-flex}
.theme:hover{border-color:var(--accent);color:var(--head)}
main{max-width:1120px;margin:0 auto;padding:0 1.5rem 3rem}
.prose{max-width:46rem;padding-top:2.5rem}
h1,h2,h3{font-family:var(--sans);color:var(--head);margin:0}
h1.page{font-size:clamp(2rem,5vw,2.8rem);font-weight:600;letter-spacing:-.035em;line-height:1.15;margin-bottom:1.4rem}
h2{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-bottom:1rem}
section{margin-top:3rem}
.lead{font-size:1.15rem;line-height:1.65;max-width:58ch;margin:0 0 1.2rem}
p{max-width:62ch}
strong{color:var(--head)}
.hero{position:relative;padding:4.5rem 0 3.5rem;margin-top:0;min-height:26rem;overflow:hidden}
.hero>*:not(.wm){position:relative;z-index:1}
.wm{position:absolute;right:-3%;top:50%;transform:translateY(-50%);width:min(46vw,500px);height:auto;pointer-events:none;z-index:0}
.wm path{fill:var(--wm);stroke:var(--wm);stroke-width:5;stroke-linejoin:round}
.eyebrow{font:500 .78rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 1.4rem}
.hero h1{font-size:clamp(2.4rem,7vw,4.3rem);font-weight:600;letter-spacing:-.04em;line-height:1.07;max-width:12em;margin:0 0 1.5rem}
.hl{color:var(--accent)}
.hero .intro{font-size:1.05rem;max-width:36rem;margin:0 0 2rem}
.cta{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1.5rem;border:1px solid var(--accent);border-radius:999px;color:var(--accent);text-decoration:none;font-size:.92rem;transition:background .25s}
.cta:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.cta svg{transition:transform .25s}
.cta:hover svg{transform:translateX(4px)}
.typed-line{font:400 .85rem/1.6 var(--mono);color:var(--muted);margin:2.5rem 0 0;min-height:1.6em}
.typed-line span{color:var(--head)}
.typed-line span.on::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:3px;background:var(--accent);vertical-align:-.2em;animation:blink 1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:0}}
.jump{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0 0 .5rem;padding:0;list-style:none;font-size:.92rem}
dl{margin:0}
.row,.item,.links li{position:relative;border-top:1px solid var(--surface)}
.row:last-child,.item:last-child,.links li:last-child{border-bottom:1px solid var(--surface)}
.row::before,.item::before,.links li::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.row:hover::before,.item:hover::before,.links li:hover::before,.item:focus-within::before,.links li:focus-within::before{transform:scaleX(1)}
.row{display:grid;gap:.15rem 2rem;padding:.9rem 0}
dt{font:500 .74rem/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
dd{margin:0}
.item{display:grid;gap:.3rem 2rem;padding:1.2rem 0}
.item h3{font-size:1.02rem;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.item p{margin:0}
.item .tech{margin-top:.4rem;color:var(--muted);font:400 .8rem/1.6 var(--mono)}
.links{margin:0;padding:0;list-style:none}
.links li{padding:1rem 0}
.links a{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--head);text-decoration:none}
.links a:hover{color:var(--accent)}
.links span{display:block;color:var(--muted);font-size:.92rem}
.after{margin-top:1rem;max-width:46rem}
.meta{font:400 .8rem/1.6 var(--mono);color:var(--muted);margin:-.6rem 0 1.4rem}
.list{max-width:62ch;padding-left:1.2rem}
.list li{margin:.4rem 0}
code{font:400 .86em var(--mono);background:color-mix(in srgb,var(--surface) 55%,transparent);padding:.1em .35em;border-radius:4px}
pre{overflow-x:auto;margin:1.4rem 0;padding:1rem 1.15rem;background:color-mix(in srgb,var(--surface) 40%,var(--bg));border:1px solid var(--surface);border-radius:8px;line-height:1.55}
pre code{background:none;padding:0;font-size:.82rem}
.back{margin-top:2.5rem}
.foot{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--surface);color:var(--muted);font:400 .78rem/1.6 var(--mono);display:flex;flex-wrap:wrap;gap:.3rem 1.5rem}
.foot a{color:var(--muted)}
@media (min-width:600px){
  .row{grid-template-columns:11rem 1fr}
  .item{grid-template-columns:13rem 1fr}
}
@media (max-width:760px){
  .top{flex-wrap:wrap;row-gap:.6rem}
  .theme{margin-left:auto}
  nav{order:3;flex-basis:100%;margin-left:0}
  nav ul{flex-wrap:wrap;gap:.2rem 1.2rem}
  .wm{opacity:.55;right:-20%}
  .hero{padding-top:2.5rem}
}

.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.cta.ghost{border-color:var(--surface);color:var(--text)}
.cta.ghost:hover{border-color:var(--accent);color:var(--head)}
.avail{margin-top:1.4rem}
.focus{font:400 .85rem/1.6 var(--mono);color:var(--muted);margin:2.5rem 0 0}
.cat{font:500 .74rem/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:2.4rem 0 .4rem}
.item h3 a{color:var(--head);text-decoration:none}
.item h3 a:hover{color:var(--accent)}
.item .more{margin-top:.5rem;font-size:.9rem}
.see{margin-top:2rem;font-size:.95rem}
.diagram{margin:1.6rem 0;max-width:30rem}
.flow{margin:0;padding:0}
.flow .step{position:relative}
.flow .step+.step{margin-top:2.2rem}
.flow .step+.step::before{content:"";position:absolute;left:50%;top:-2rem;height:1.4rem;width:2px;margin-left:-1px;background:var(--accent)}
.flow .step+.step::after{content:"";position:absolute;left:50%;top:-.65rem;margin-left:-5px;border:5px solid transparent;border-top:7px solid var(--accent);border-bottom:0}
.cells{display:flex;flex-wrap:wrap;gap:.6rem}
.node{flex:1 1 9rem;min-width:0;padding:.7rem .8rem;border:1px solid var(--surface);border-radius:8px;background:var(--bg);background:color-mix(in srgb,var(--surface) 35%,var(--bg));color:var(--text);text-align:center}
.node strong{display:block;font:500 .9rem/1.35 var(--mono);color:var(--head);overflow-wrap:anywhere}
.node span{display:block;margin-top:.2rem;font:400 .8rem/1.4 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.node.mine{border-color:var(--accent)}
.diagram figcaption{font:400 .8rem/1.6 var(--mono);color:var(--muted);margin-top:.8rem}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;font-size:1.1rem}
.copy{display:none;align-items:center;padding:.35rem .9rem;border:1px solid var(--surface);border-radius:999px;background:transparent;color:var(--text);font:400 .8rem var(--mono);cursor:pointer}
.js .copy{display:inline-flex}
.copy:hover{border-color:var(--accent);color:var(--head)}

/* Animations : uniquement si l'utilisateur ne les a pas désactivées */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .top{view-transition-name:top}
  main{view-transition-name:content}
  @keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
  ::view-transition-old(content){animation:.18s ease both vt-out}
  ::view-transition-new(content){animation:.35s ease .05s both vt-in}

  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes slide{from{opacity:0;transform:translate(40px,-50%)}to{opacity:1;transform:translateY(-50%)}}
  html.intro .top{animation:fade .8s ease both}
  html.intro .hero>*:not(.wm){animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  html.intro .hero>.eyebrow{animation-delay:.15s}
  html.intro .hero>h1{animation-delay:.28s}
  html.intro .hero>.intro{animation-delay:.42s}
  html.intro .hero>.cta-row{animation-delay:.56s}
  html.intro .hero>.focus{animation-delay:.7s}
  html.intro .wm{animation:slide 1.5s cubic-bezier(.2,.7,.2,1) .1s both}

  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
}