*{box-sizing:border-box}
html,body{
margin:0;
padding:0;
font-family:Inter,system-ui,sans-serif;
background:#eaf0f8;
color:#111827
}

:root{
--border:#d8e0ee;
--muted:#6b7280;
--shadow:0 20px 45px rgba(15,23,42,.08);

--yellow:#e6d400;
--blue:#3b82f6;
--teal:#0891b2;
--cyan:#4cc9f0;
--pink:#ef5da8;
--purple:#8b5cf6;
--azure:#0ea5e9;
}

.shell{max-width:1400px;margin:0 auto;padding:20px}

.card{
background:rgba(255,255,255,.86);
border:1px solid var(--border);
border-radius:28px;
box-shadow:var(--shadow)
}

/* HEADER */
.topbar{
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:24px 26px;
margin-bottom:18px
}

.pill{
display:inline-block;
padding:8px 12px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-weight:700;
font-size:13px
}

h1{
margin:12px 0 8px;
font-size:clamp(32px,5vw,54px);
line-height:1.03
}

#site-subtitle{
margin:0;
color:var(--muted);
font-size:18px
}

.top-meta{display:flex;gap:12px}

.mini-stat{
padding:14px 18px;
border:1px solid var(--border);
border-radius:20px;
background:#fff
}

.mini-stat span{
display:block;
color:var(--muted);
font-size:13px;
margin-bottom:4px
}

.mini-stat strong{font-size:16px}

/* GRID */
.grid{
display:grid;
grid-template-columns:1.15fr .85fr;
grid-template-areas:
"flow right"
"today today";
gap:18px
}

.flow-card{grid-area:flow;padding:22px}

.right-stack{
grid-area:right;
display:grid;
grid-template-rows:1fr 1fr;
gap:18px
}

.gauge-card,.strings-card,.today-card{padding:22px}
.today-card{grid-area:today}

.card-title{
font-size:20px;
font-weight:800;
margin-bottom:14px
}

/* FLOW */
.flow-wrap{width:100%;overflow:auto}
.flow-svg{width:100%;height:auto;min-width:740px}

/* ===== LIGNES ===== */
.line{
fill:none;
stroke-width:4;
stroke-linecap:round;
stroke-dasharray:14 10;
animation:flowForward 1.2s linear infinite;
opacity:0.2;
transition:opacity .3s ease;
}

.line.active{
opacity:1;
}

.line.reverse{
animation-name:flowReverse;
}

/* vitesse dynamique */
.line.fast{animation-duration:0.6s}
.line.medium{animation-duration:1.2s}
.line.slow{animation-duration:2s}

/* couleurs */
.line.yellow{stroke:var(--yellow)}
.line.blue{stroke:var(--blue)}
.line.cyan{stroke:var(--cyan)}
.line.purple{stroke:var(--purple)}
.line.magenta{stroke:var(--pink)}
.line.azure{stroke:var(--azure)}
.line.blue2{stroke:#4d91ca}

/* ===== NODES ===== */
.node-ring{
fill:#fff;
stroke-width:5;
transition:all .3s ease;
}

/* glow amélioré */
.node-ring.yellow{stroke:var(--yellow);filter:drop-shadow(0 0 8px rgba(230,212,0,.5))}
.node-ring.blue{stroke:var(--blue);filter:drop-shadow(0 0 8px rgba(59,130,246,.4))}
.node-ring.teal{stroke:var(--teal);filter:drop-shadow(0 0 8px rgba(8,145,178,.4))}
.node-ring.blue2{stroke:#4d91ca}
.node-ring.pink{stroke:var(--pink);filter:drop-shadow(0 0 8px rgba(239,93,168,.4))}
.node-ring.cyan{stroke:var(--cyan);filter:drop-shadow(0 0 8px rgba(76,201,240,.4))}

/* node OFF */
.node-dim{
opacity:0.35;
filter:none;
}

/* ===== TEXT ===== */
.node-top{
font-size:16px;
fill:#5b6472;
font-weight:600;
}

.node-top.bottom{
font-size:18px;
}

.node-icon{
font-size:32px;
fill:#111827;
}

.node-value{
font-size:24px;
fill:#111827;
font-weight:700;
}

.node-sub{
font-size:16px;
font-weight:700;
}

.node-sub.neg{fill:var(--pink)}
.node-sub.pos{fill:#2aa879}

/* ===== GAUGE ===== */
.gauge-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px
}

.caption{
color:var(--muted);
font-size:14px
}

.gauge-wrap{
display:flex;
justify-content:center;
align-items:center;
min-height:260px;
width:100%
}

.gauge-simple{
width:min(100%,520px);
display:flex;
flex-direction:column;
align-items:center;
gap:18px
}

.gauge-value.big{
font-size:56px;
font-weight:800;
color:#111827;
margin-bottom:8px
}

.gauge-bar{
width:100%;
height:28px;
background:#d9e6f2;
border-radius:999px;
overflow:hidden;
border:1px solid var(--border)
}

.gauge-fill{
width:0%;
height:100%;
background:linear-gradient(90deg,#1997d5,#4cc9f0);
border-radius:999px;
transition:width .4s ease
}

/* STRINGS */
.string-list{display:grid;gap:18px;margin-top:8px}

.string-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 8px;
border-bottom:1px solid var(--border);
font-size:22px
}

.string-row:last-child{border-bottom:none}

/* TODAY */
.today-top{
display:grid;
grid-template-columns:260px 1fr;
gap:18px;
align-items:start
}

.today-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px
}

.today-item{
padding:18px;
border:1px solid var(--border);
border-radius:20px;
background:#fbfdff
}

.today-item span{
display:block;
color:var(--muted);
margin-bottom:8px
}

.today-item strong{
font-size:clamp(24px,4vw,38px)
}

.chart-wrap{
margin-top:18px;
height:360px
}

/* FOOTER */
.footer-note{
margin:18px 4px 0;
color:var(--muted);
text-align:center
}

/* RESPONSIVE */
@media (max-width:1080px){
.grid{
grid-template-columns:1fr;
grid-template-areas:
"flow"
"right"
"today"
}
.right-stack{grid-template-rows:auto auto}
}

@media (max-width:760px){
.shell{padding:12px}
.topbar,.flow-card,.gauge-card,.strings-card,.today-card{padding:16px}
.topbar{flex-direction:column;gap:12px}
.today-top{grid-template-columns:1fr}
.today-grid{grid-template-columns:1fr 1fr}
.chart-wrap{height:280px}
}

/* ===== ANIM ===== */
@keyframes flowForward{
from{stroke-dashoffset:0}
to{stroke-dashoffset:-24}
}

@keyframes flowReverse{
from{stroke-dashoffset:0}
to{stroke-dashoffset:24}
}