/*
 * JevScreener — documentation. Mise en page à la GitBook : barre supérieure,
 * sommaire à gauche, texte au centre, « On this page » à droite.
 * Les jetons viennent de DESIGN.md (mêmes noms que web/v2/app.css) ; les tailles
 * de lecture doc-* sont les jetons ajoutés pour la documentation. Sombre seulement.
 */
:root{
  --bg:#0B0E13; --surface:#11151C; --raised:#181E28; --rule:#232B37; --rule2:#313B4A;
  --ink:#E6EAF0; --ink2:#9AA5B4;
  --buy:#3DD68C; --sell:#F26B76; --signal:#F5B83D; --brand:#F387B3;
  --buy-soft:#12301F; --sell-soft:#3A1A20; --signal-soft:#33291A;
  --code-key:#7FB8D1; --code-string:#9AD1A3; --code-number:#E3A24A;
  --t-doc-h1:30px; --t-display:22px; --t-title:16px; --t-doc-body:16px; --t-body:14px; --t-data:13px; --t-label:12px;
  --r-sm:3px; --r-md:6px;
  --top:56px; --side:280px; --toc:232px; --measure:760px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--top) + 24px)}
body{margin:0; background:var(--bg); color:var(--ink); font:400 var(--t-body)/1.5 var(--font);
     font-feature-settings:"tnum"; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px; border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} }

/* ————— barre supérieure ————— */
.top{position:sticky; top:0; z-index:40; height:var(--top); display:flex; align-items:center; gap:16px; padding:0 24px;
     background:var(--surface); border-bottom:1px solid var(--rule)}
.brand{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; flex:none}
.brand img{height:26px; width:auto; display:block}
.brand .tag{font-size:var(--t-label); font-weight:500; color:var(--ink2); padding:2px 8px; border:1px solid var(--rule2); border-radius:var(--r-sm)}
.search-btn{flex:1; max-width:420px; margin:0 auto; display:flex; align-items:center; gap:10px; height:36px; padding:0 10px 0 12px;
     background:var(--bg); border:1px solid var(--rule2); border-radius:var(--r-md); color:var(--ink2); font-size:var(--t-body)}
.search-btn:hover{border-color:var(--ink2)}
.search-btn span{flex:1; text-align:left}
kbd{font:500 var(--t-label) var(--font); color:var(--ink2); padding:1px 6px; border:1px solid var(--rule2); border-radius:var(--r-sm); background:var(--raised)}
.top-links{display:flex; align-items:center; gap:6px; flex:none}
.top-links a{padding:7px 10px; border-radius:var(--r-md); color:var(--ink2); font-weight:500}
.top-links a:hover{color:var(--ink); background:var(--raised)}
.top-links a.cta{color:var(--bg); background:var(--signal); font-weight:600}
.top-links a.cta:hover{color:var(--bg); background:var(--signal); filter:brightness(1.08)}
.burger{display:none; width:36px; height:36px; border-radius:var(--r-md); align-items:center; justify-content:center; color:var(--ink2); flex:none}
.burger:hover{background:var(--raised); color:var(--ink)}

/* ————— trois colonnes ————— */
.layout{display:grid; grid-template-columns:var(--side) minmax(0,1fr) var(--toc); max-width:1440px; margin:0 auto}
.side{position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow-y:auto; padding:24px 16px 48px 24px;
      border-right:1px solid var(--rule); scrollbar-width:thin; scrollbar-color:var(--rule2) transparent}
.side h4{margin:22px 0 6px; padding:0 10px; font-size:var(--t-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.side h4:first-child{margin-top:0}
.side a{display:flex; align-items:center; gap:8px; padding:6px 10px; margin:1px 0; border-radius:var(--r-md); color:var(--ink2); font-size:var(--t-body); line-height:1.35; position:relative}
.side a:hover{color:var(--ink); background:var(--surface)}
.side a.on{color:var(--ink); background:var(--raised); font-weight:500}
.side a.on::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px; border-radius:2px; background:var(--signal)}
.side a .soon{margin-left:auto}
.side .side-foot{margin-top:28px; padding:14px 10px 0; border-top:1px solid var(--rule); font-size:var(--t-label); color:var(--ink2); line-height:1.6}
.side .side-foot a{display:inline; padding:0; color:var(--ink2); text-decoration:underline; text-underline-offset:3px}

main{min-width:0; padding:40px 56px 80px}
.doc{max-width:var(--measure); margin:0 auto}
.crumb{font-size:var(--t-label); font-weight:500; color:var(--signal); letter-spacing:.02em; margin-bottom:10px}

.toc{position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow-y:auto; padding:40px 24px 40px 8px}
.toc h5{margin:0 0 10px; font-size:var(--t-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.toc a{display:block; padding:5px 0 5px 12px; border-left:1px solid var(--rule); color:var(--ink2); font-size:var(--t-data); line-height:1.4}
.toc a.l3{padding-left:24px}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--signal); border-left-color:var(--signal)}

/* ————— texte ————— */
.doc h1{margin:0 0 12px; font-size:var(--t-doc-h1); line-height:1.2; font-weight:600; letter-spacing:-.02em}
.doc .lede{margin:0 0 32px; font-size:18px; line-height:1.6; color:var(--ink2)}
.doc h2{margin:48px 0 14px; font-size:var(--t-display); line-height:1.3; font-weight:600; letter-spacing:-.01em; padding-top:24px; border-top:1px solid var(--rule)}
.doc h3{margin:32px 0 10px; font-size:var(--t-title); line-height:1.4; font-weight:600}
.doc h2 .anchor,.doc h3 .anchor{margin-left:8px; color:var(--ink2); opacity:0; font-weight:400; transition:opacity .15s}
.doc h2:hover .anchor,.doc h3:hover .anchor,.doc .anchor:focus-visible{opacity:1}
.doc p,.doc li{font-size:var(--t-doc-body); line-height:1.7; color:var(--ink)}
.doc p{margin:0 0 16px}
.doc ul,.doc ol{margin:0 0 16px; padding-left:22px}
.doc li{margin:4px 0}
.doc li::marker{color:var(--ink2)}
.doc strong{font-weight:600}
.doc .mute{color:var(--ink2)}
.doc p a,.doc li a,.doc td a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--signal); text-underline-offset:3px; text-decoration-thickness:1px}
.doc p a:hover,.doc li a:hover,.doc td a:hover{color:var(--signal)}
.doc code{font-family:var(--mono); font-size:.86em; padding:2px 6px; border-radius:var(--r-sm); background:var(--raised); border:1px solid var(--rule)}
.doc hr{border:0; border-top:1px solid var(--rule); margin:32px 0}

/* tableaux : défilent dans leur boîte, jamais la page */
.tbl{overflow-x:auto; margin:0 0 20px; border:1px solid var(--rule); border-radius:var(--r-md)}
.doc table{width:100%; border-collapse:collapse; font-size:var(--t-body)}
.doc th{text-align:left; font-size:var(--t-label); font-weight:600; color:var(--ink2); background:var(--surface); padding:10px 14px; border-bottom:1px solid var(--rule); white-space:nowrap}
.doc td{padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.55; font-size:var(--t-body)}
.doc tr:last-child td{border-bottom:0}
.doc td.num,.doc th.num{text-align:right; white-space:nowrap}
.doc td code{font-size:var(--t-label)}

/* ————— encadrés ————— */
.hint{display:flex; gap:12px; margin:0 0 20px; padding:14px 16px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--ink2)}
.hint svg{flex:none; margin-top:3px; color:var(--ink2)}
.hint p:last-child{margin-bottom:0}
.hint p,.hint li{font-size:15px}
.hint b.h{display:block; font-weight:600; margin-bottom:2px; font-size:15px}
.hint.info{border-left-color:var(--ink2)}
.hint.good{border-left-color:var(--buy)} .hint.good svg{color:var(--buy)}
.hint.warn{border-left-color:var(--signal); background:var(--signal-soft)} .hint.warn svg{color:var(--signal)}
.hint.secret{border-left-color:var(--sell)} .hint.secret svg{color:var(--sell)}

.pill{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:var(--r-sm); font:600 11px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.pill.soon{color:var(--signal); background:var(--signal-soft)}
.pill.live{color:var(--buy); background:var(--buy-soft)}
.pill.off{color:var(--ink2); background:var(--raised)}
.pill .dot{width:6px; height:6px; border-radius:999px; background:currentColor}
.pill.live .dot{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ————— code ————— */
.code{position:relative; margin:0 0 20px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface); overflow:hidden}
.code .bar{display:flex; align-items:center; gap:2px; height:38px; padding:0 6px 0 12px; border-bottom:1px solid var(--rule); background:var(--bg)}
.code .bar .lang{font:500 var(--t-label) var(--font); color:var(--ink2)}
.code .bar .tabbtn{height:38px; padding:0 10px; font:500 var(--t-label) var(--font); color:var(--ink2); border-bottom:2px solid transparent}
.code .bar .tabbtn.on{color:var(--ink); border-bottom-color:var(--signal)}
.code .bar .copy{margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 8px; border-radius:var(--r-sm); font:500 var(--t-label) var(--font); color:var(--ink2)}
.code .bar .copy:hover{background:var(--raised); color:var(--ink)}
.code pre{margin:0; padding:14px 16px; overflow-x:auto; font:400 var(--t-data)/1.65 var(--mono); color:var(--ink); tab-size:2}
.code pre[hidden]{display:none}
.code pre code{all:unset; font:inherit; white-space:pre}
.tk-k{color:var(--code-key)} .tk-s{color:var(--code-string)} .tk-n{color:var(--code-number)} .tk-c{color:var(--ink2); font-style:italic} .tk-b{color:var(--signal)}

/* ————— points d'accès ————— */
.ep{margin:0 0 16px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface)}
.ep-h{display:flex; align-items:center; gap:10px; padding:12px 14px; flex-wrap:wrap}
.ep-h .m{font:600 var(--t-label)/1 var(--mono); padding:5px 7px; border-radius:var(--r-sm); background:var(--raised); color:var(--ink); border:1px solid var(--rule2)}
.ep-h .path{font:400 var(--t-body) var(--mono); color:var(--ink); word-break:break-all}
.ep-h .pill{margin-left:auto}
.ep-b{padding:0 14px 12px; color:var(--ink2); font-size:15px; line-height:1.6}
.ep-b p{margin:0; font-size:15px; color:var(--ink2)}

/* ————— cartes ————— */
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 28px}
.card{display:block; padding:16px 18px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface); transition:border-color .15s, background .15s}
.card:hover{border-color:var(--rule2); background:var(--raised)}
.card b{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; margin-bottom:4px; color:var(--ink)}
.card span{display:block; font-size:var(--t-body); color:var(--ink2); line-height:1.55}
.card .ic{color:var(--signal)}

/* ————— héros de l'accueil ————— */
.hero{position:relative; margin:0 0 36px; padding:36px 32px; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden;
      background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 55%), var(--surface)}
.hero img{height:44px; width:auto; display:block; margin-bottom:20px}
.hero h1{margin:0 0 10px}
.hero p{margin:0; max-width:560px; color:var(--ink2); font-size:17px}
.hero .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.btn{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:var(--r-md); font-weight:600; font-size:var(--t-body); border:1px solid var(--rule2); color:var(--ink) !important; text-decoration:none !important}
.btn:hover{background:var(--raised)}
.btn.primary{background:var(--signal); color:var(--bg) !important; border-color:var(--signal)}
.btn.primary:hover{filter:brightness(1.08); background:var(--signal)}

/* ————— chaîne de traitement ————— */
.flow{margin:8px 0 28px; display:grid; gap:0}
.stage{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:start; padding:14px 0; border-bottom:1px dashed var(--rule)}
.stage:last-child{border-bottom:0}
.stage .n{width:32px; height:32px; border-radius:999px; display:grid; place-items:center; font:600 var(--t-data) var(--font); background:var(--raised); border:1px solid var(--rule2); color:var(--ink)}
.stage .t b{display:block; font-size:15px; font-weight:600; margin-bottom:2px}
.stage .t span{display:block; color:var(--ink2); font-size:var(--t-body); line-height:1.55}
.stage .d{font:500 var(--t-label) var(--mono); color:var(--signal); white-space:nowrap; padding-top:8px}

/* frise de latence : chaque segment à l'échelle du budget */
.lat{margin:4px 0 28px; padding:18px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface)}
.lat .track{display:flex; height:30px; border-radius:var(--r-sm); overflow:hidden; background:var(--bg); border:1px solid var(--rule)}
.lat .seg{display:flex; align-items:center; justify-content:center; font:600 var(--t-label) var(--font); color:var(--ink); border-right:1px solid var(--bg); min-width:6px; white-space:nowrap; overflow:hidden}
.lat .seg.a{background:var(--raised)} .lat .seg.b{background:var(--rule2)} .lat .seg.c{background:var(--signal); color:var(--bg)}
.lat .axis{display:flex; justify-content:space-between; margin-top:6px; font:500 var(--t-label) var(--font); color:var(--ink2)}
.lat .legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:var(--t-data); color:var(--ink2)}
.lat .legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px}
.lat .legend i.a{background:var(--raised); border:1px solid var(--rule2)} .lat .legend i.b{background:var(--rule2)} .lat .legend i.c{background:var(--signal)}

.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 24px}
.stat{padding:14px 16px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface)}
.stat .v{font-size:var(--t-display); font-weight:600; letter-spacing:-.01em}
.stat .v small{font-size:var(--t-body); font-weight:500; color:var(--ink2); margin-left:2px}
.stat .k{font-size:var(--t-label); color:var(--ink2); margin-top:2px; line-height:1.4}

/* ————— bas de page : précédent / suivant ————— */
.pn{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:56px}
.pn a{display:block; padding:14px 16px; border:1px solid var(--rule); border-radius:var(--r-md)}
.pn a:hover{border-color:var(--rule2); background:var(--surface)}
.pn a small{display:block; font-size:var(--t-label); color:var(--ink2); margin-bottom:2px}
.pn a b{font-weight:600; font-size:15px}
.pn a.next{text-align:right; grid-column:2}
.foot{margin-top:40px; padding-top:18px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:var(--t-label); color:var(--ink2)}

/* ————— recherche ————— */
.sk{position:fixed; inset:0; z-index:60; display:none; align-items:flex-start; justify-content:center; padding:10vh 16px 16px; background:color-mix(in srgb, var(--bg) 72%, transparent)}
.sk.on{display:flex}
.sk-box{width:100%; max-width:620px; background:var(--surface); border:1px solid var(--rule2); border-radius:var(--r-md); overflow:hidden}
.sk-in{display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--rule)}
.sk-in svg{color:var(--ink2); flex:none}
.sk-in input{flex:1; height:52px; background:none; border:0; outline:0; color:var(--ink); font:400 var(--t-title) var(--font)}
.sk-in input::placeholder{color:var(--ink2)}
.sk-res{max-height:min(60vh,480px); overflow-y:auto; padding:6px}
.sk-res a{display:block; padding:10px 12px; border-radius:var(--r-md)}
.sk-res a.sel{background:var(--raised)}
.sk-res a small{display:block; font-size:var(--t-label); color:var(--ink2); margin-bottom:2px}
.sk-res a b{display:block; font-weight:600; font-size:var(--t-body)}
.sk-res a span{display:block; font-size:var(--t-data); color:var(--ink2); margin-top:2px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sk-res mark{background:none; color:var(--signal)}
.sk-empty{padding:28px; text-align:center; color:var(--ink2)}
.sk-foot{display:flex; gap:16px; padding:10px 14px; border-top:1px solid var(--rule); font-size:var(--t-label); color:var(--ink2)}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:70; padding:8px 14px; border-radius:var(--r-md); background:var(--raised); border:1px solid var(--rule2); font-size:var(--t-data); opacity:0; pointer-events:none; transition:opacity .2s}
.toast.on{opacity:1}

/* ————— largeurs ————— */
@media (max-width:1240px){
  .layout{grid-template-columns:var(--side) minmax(0,1fr)}
  .toc{display:none}
  main{padding:36px 40px 72px}
}
@media (max-width:900px){
  .layout{display:block}
  .burger{display:inline-flex}
  .side{position:fixed; z-index:50; top:var(--top); left:0; bottom:0; height:auto; width:min(86vw,320px); background:var(--bg);
        transform:translateX(-100%); transition:transform .2s; border-right:1px solid var(--rule2)}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block}
  .scrim{display:none; position:fixed; inset:var(--top) 0 0 0; z-index:45; background:color-mix(in srgb, var(--bg) 60%, transparent)}
  main{padding:28px 16px 64px}
  .top{padding:0 12px; gap:10px}
  .brand .tag{display:none}
  .top-links a:not(.cta){display:none}
  .search-btn{max-width:none}
  .search-btn span,.search-btn kbd{display:none}
  .search-btn{flex:0 0 36px; width:36px; padding:0; justify-content:center; margin:0 0 0 auto}
}
@media (max-width:640px){
  .cards,.stats{grid-template-columns:1fr}
  .hero{padding:24px 18px}
  .doc h1{font-size:26px}
  .stage{grid-template-columns:36px minmax(0,1fr)}
  .stage .d{grid-column:2; padding-top:0}
  .pn{grid-template-columns:1fr}
  .pn a.next{grid-column:1}
  .top-links a.cta{padding:7px 10px}
}