:root{
--bg:#FFFFFF;
--surface:#FFFFFF;
--ink:#14213D;
--muted:#5B6781;
--border:#D9E0EC;
--node:#F7F9FC;
--node-stroke:#B8C3D8;
--in:#16A34A;
--out:#EA580C;
--cut:#DC2626;
--rest:#7C3AED;
--accent:#14213D;
--tabbar:rgba(255,255,255,.94);
--shadow:0 1px 2px rgba(20,33,61,.04),0 12px 32px rgba(20,33,61,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
background:var(--bg);
color:var(--ink);
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
line-height:1.5;
min-height:100vh;
min-height:100dvh;
padding:max(20px,env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
}
main{max-width:520px;margin:0 auto}
.head{margin-bottom:16px}
h1{font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.subtitle{margin-top:6px;color:var(--muted);font-size:.95rem}
.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:20px;
box-shadow:var(--shadow);
padding:16px 12px 20px;
}
.schema{display:block;width:100%;height:auto;max-width:460px;margin:0 auto}
.line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.line.in{stroke:var(--in)}
.line.out{stroke:var(--out)}
.line.cut{stroke:var(--cut);stroke-width:3}
.line.cutp{stroke:var(--rest);stroke-width:3}
.line.rest{stroke:var(--rest);stroke-dasharray:2 7;stroke-width:3}
.line.base{stroke-opacity:.22}
.line.flow{stroke-width:3.5;stroke-dasharray:9 15;animation:flow 1.4s linear infinite}
.line.flow.cutp,.line.flow.cut{stroke-width:4;stroke-dasharray:8 12;animation-duration:.9s}
.line.flow.rest{stroke-width:4;stroke-dasharray:3 13;animation-duration:1.8s}
@keyframes flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-24}}
@keyframes reveal{from{opacity:0}to{opacity:1}}
#app .only-propre,#app .only-arnaque{animation:reveal .45s ease both}
.fill-in{fill:var(--in)}
.fill-out{fill:var(--out)}
.fill-cut{fill:var(--cut)}
.fill-rest{fill:var(--rest)}
.lbl{font-size:10.5px;font-weight:600;font-family:inherit}
.in-t{fill:var(--in)}
.out-t{fill:var(--out)}
.cut-t{fill:var(--cut)}
.rest-t{fill:var(--rest)}
.node rect{fill:var(--node);stroke:var(--node-stroke);stroke-width:1.5}
.node text{fill:var(--ink);font-size:13px;font-weight:700;font-family:inherit}
.node.creator rect{stroke:var(--cut);stroke-width:2}
#app[data-mode="propre"] .node.creator rect{stroke:var(--rest)}
#app[data-mode="propre"] .sw.cut{border-color:var(--rest)}
#app[data-mode="propre"] .only-arnaque{display:none}
#app[data-mode="arnaque"] .only-propre{display:none}
.legend{
list-style:none;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px 12px;
margin:18px 8px 0;
font-size:.82rem;
color:var(--muted);
}
.legend li{display:flex;align-items:center;gap:8px}
.sw{display:block;width:22px;height:0;border-top:3px solid;flex:none}
.sw.in{border-color:var(--in)}
.sw.out{border-color:var(--out)}
.sw.cut{border-color:var(--cut)}
.sw.rest{border-color:var(--rest);border-top-style:dotted}
.caption{
margin:18px 8px 0;
padding-top:16px;
border-top:1px solid var(--border);
font-size:.95rem;
color:var(--ink);
}
.tabbar{
position:fixed;
left:0;
right:0;
bottom:0;
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
padding:8px 12px calc(8px + env(safe-area-inset-bottom));
background:var(--tabbar);
border-top:1px solid var(--border);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
}
.tab{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
min-height:56px;
border:0;
border-radius:14px;
background:transparent;
color:var(--muted);
font:inherit;
font-size:.78rem;
font-weight:600;
cursor:pointer;
transition:background-color .2s,color .2s;
}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-selected="true"]{background:color-mix(in srgb,var(--in) 14%,transparent);color:var(--in)}
.tab[data-mode="arnaque"][aria-selected="true"]{background:color-mix(in srgb,var(--cut) 14%,transparent);color:var(--cut)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:768px){
body{padding-top:48px}
main{max-width:560px}
h1{font-size:1.9rem}
.card{padding:24px 24px 28px}
.tabbar{
left:50%;
right:auto;
bottom:20px;
width:420px;
transform:translateX(-50%);
border:1px solid var(--border);
border-radius:20px;
box-shadow:var(--shadow);
padding:8px;
}
.tab{flex-direction:row;gap:8px;min-height:48px;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
.tab{transition:none}
.line.flow{animation:none;stroke-dasharray:none;opacity:.35}
#app .only-propre,#app .only-arnaque{animation:none}
}