/* StatiTube — cockpit analytique public de PoliTube. */
:root {
  --st-cyan: #43d4e7;
  --st-cyan-soft: #9aecf5;
  --st-red: #ff6578;
  --st-white: #f4f1e8;
  --st-blue: #68a8f3;
  --st-violet: #9b82ff;
  --st-panel: rgba(14, 20, 32, .82);
  --st-line: rgba(165, 191, 219, .14);
}

body.statitube { overflow-x: hidden; background: #070b12; }
body.statitube .poly-main { position: relative; max-width: none; padding: clamp(1.3rem, 2.5vw, 2.7rem) clamp(1.15rem, 3vw, 3.5rem) 4rem; overflow: hidden; }
body.statitube .poly-main::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(118,154,192,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(118,154,192,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 68%); }
.st-orbit { position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(67, 212, 231, .08); border-radius: 50%; }
.st-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--st-cyan); box-shadow: 0 0 20px var(--st-cyan); }
.st-orbit-one { width: 520px; height: 520px; top: -290px; right: -130px; }
.st-orbit-one::after { left: 66px; bottom: 70px; }
.st-orbit-two { width: 820px; height: 820px; top: -550px; right: -190px; border-color: rgba(104,168,243,.06); }
.st-orbit-two::after { left: 100px; bottom: 118px; background: var(--st-blue); }

.st-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.8rem; align-items: end; padding: .5rem 0 1.8rem; }
.st-kicker, .st-eyebrow { display: flex; align-items: center; gap: .55rem; color: var(--st-cyan); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.st-kicker > span { width: 22px; height: 1px; background: var(--st-cyan); box-shadow: 0 0 10px var(--st-cyan); }
.st-hero h1 { margin: .5rem 0 .45rem; color: #f3f7fb; font: 700 clamp(3rem, 6vw, 5.7rem)/.85 var(--font-grotesk); letter-spacing: -.075em; }
.st-hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(102, 219, 233, .9); text-shadow: 0 0 28px rgba(67, 212, 231, .18); }
.st-hero > div:first-child > p { max-width: 680px; color: var(--yt-muted); font-size: clamp(.95rem, 1.4vw, 1.12rem); }
.st-scope { display: grid; justify-items: end; gap: .6rem; }
.st-segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .28rem; border: 1px solid var(--st-line); border-radius: 12px; background: rgba(9, 14, 24, .74); box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.st-segmented button { min-height: 35px; padding: 0 .85rem; border: 0; border-radius: 8px; background: transparent; color: var(--yt-muted); font: 600 .76rem var(--font-grotesk); }
.st-segmented button:hover { color: #fff; background: rgba(255,255,255,.045); }
.st-segmented button.on { color: #062028; background: var(--st-cyan); box-shadow: 0 4px 18px rgba(67,212,231,.2); }
.st-segmented.compact button { min-height: 27px; padding: 0 .65rem; font-size: .68rem; }
.st-freshness { position: absolute; right: 0; bottom: 0; color: var(--yt-faint); font-size: .68rem; }
.st-freshness.is-stale { color: #e6b23c; }

.st-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1.15rem; }
.st-kpi { position: relative; overflow: hidden; min-height: 135px; padding: 1.15rem 1.25rem; border: 1px solid var(--st-line); border-radius: 17px; background: linear-gradient(145deg, rgba(20,28,44,.94), rgba(10,15,25,.84)); box-shadow: 0 17px 45px rgba(0,0,0,.18); }
.st-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--st-cyan); box-shadow: 0 0 14px var(--st-cyan); opacity: .75; }
.st-kpi::after { content: ""; position: absolute; width: 100px; height: 100px; right: -55px; top: -65px; border: 1px solid rgba(67,212,231,.12); border-radius: 50%; box-shadow: 0 0 0 22px rgba(67,212,231,.018); }
.st-kpi > span { color: var(--yt-muted); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.st-kpi strong { display: block; margin-top: .65rem; color: #f6f9fc; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: .95; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.st-kpi small { display: block; margin-top: .52rem; color: var(--yt-faint); font-size: .68rem; }
.st-kpi:nth-child(2)::before { background: var(--st-violet); box-shadow: 0 0 14px var(--st-violet); }
.st-kpi:nth-child(3)::before { background: var(--st-blue); box-shadow: 0 0 14px var(--st-blue); }
.st-kpi:nth-child(4)::before { background: #55d893; box-shadow: 0 0 14px #55d893; }

.st-family-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .75rem 0 1.2rem; }
.st-family-card { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; min-height: 69px; padding: .75rem 1rem; border: 1px solid var(--st-line); border-radius: 14px; background: rgba(12,18,29,.64); }
.st-family-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-weight: 700; background: rgba(255,255,255,.04); }
.st-family-card.newseur .st-family-symbol { color: var(--st-red); border: 1px solid rgba(255,101,120,.28); }
.st-family-card.politique .st-family-symbol { color: var(--st-white); border: 1px solid rgba(244,241,232,.22); }
.st-family-card.media .st-family-symbol { color: var(--st-blue); border: 1px solid rgba(104,168,243,.28); }
.st-family-card b { display: block; color: #eef3f8; font-size: .88rem; }
.st-family-card small { color: var(--yt-faint); font-size: .66rem; }
.st-family-card > strong { color: var(--yt-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

.st-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(285px, .7fr); gap: 1rem; }
.st-panel { border: 1px solid var(--st-line); border-radius: 21px; background: linear-gradient(155deg, rgba(16,23,37,.9), rgba(9,14,23,.92)); box-shadow: 0 28px 85px rgba(0,0,0,.22); overflow: hidden; }
.st-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem 1rem; }
.st-panel-head h2 { margin: .28rem 0 .25rem; color: #f1f5f9; font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.035em; }
.st-panel-head p { color: var(--yt-faint); font-size: .76rem; line-height: 1.45; }
.st-metric-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; padding: .2rem; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--st-line); }
.st-metric-switch button { min-height: 31px; padding: 0 .58rem; border: 0; border-radius: 7px; background: transparent; color: var(--yt-faint); font: 600 .66rem var(--font-grotesk); }
.st-metric-switch button:hover { color: #fff; }
.st-metric-switch button.on { color: var(--st-cyan-soft); background: rgba(67,212,231,.12); }
.st-compare-tools { display: grid; justify-items: end; gap: .45rem; }
.st-share-tools { display: flex; gap: .35rem; }
.st-share-tools button { min-height: 29px; padding: 0 .65rem; color: var(--yt-faint); background: transparent; border: 1px solid var(--st-line); border-radius: 8px; font: 600 .62rem var(--font-grotesk); }
.st-share-tools button:hover, .st-share-tools button:focus-visible { color: var(--st-cyan-soft); border-color: rgba(67,212,231,.34); background: rgba(67,212,231,.06); }

.st-picker { position: relative; display: flex; align-items: center; gap: .55rem; margin: 0 1.35rem .55rem; min-height: 43px; padding: 0 .8rem; border: 1px solid var(--st-line); border-radius: 11px; background: rgba(2,7,13,.35); }
.st-picker:focus-within { border-color: rgba(67,212,231,.48); }
.st-picker-icon { color: var(--st-cyan); font-size: 1.05rem; }
.st-picker input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #eef4f8; font: .78rem var(--font-grotesk); }
.st-picker > span:last-of-type { color: var(--yt-faint); font-size: .65rem; font-variant-numeric: tabular-nums; }
.st-suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 7px); display: grid; max-height: 320px; overflow-y: auto; border-radius: 13px; background: rgba(8,13,22,.98); border: 1px solid rgba(67,212,231,.25); box-shadow: 0 25px 65px rgba(0,0,0,.45); }
.st-suggestions:empty { display: none; }
.st-suggestions button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 54px; padding: .55rem .7rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); background: transparent; color: #eef3f8; text-align: left; }
.st-suggestions button:hover, .st-suggestions button:focus-visible { background: rgba(67,212,231,.08); }
.st-suggestions img, .st-suggestion-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: none; background: #141c2a; color: var(--st-cyan); font-size: .68rem; }
.st-suggestions b { display: block; font-size: .76rem; }
.st-suggestions small { color: var(--yt-faint); font-size: .64rem; }
.st-selected { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 39px; padding: .15rem 1.35rem .65rem; }
.st-profile-chip { display: inline-flex; align-items: center; gap: .42rem; max-width: 180px; min-height: 30px; padding: .2rem .35rem .2rem .25rem; border: 1px solid var(--chip-color, var(--st-line)); border-radius: 999px; color: #e9eef4; background: color-mix(in srgb, var(--chip-color, var(--st-cyan)) 8%, transparent); font-size: .66rem; }
.st-profile-chip img, .st-profile-chip .avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: none; background: #111827; font-size: .55rem; }
.st-profile-chip > span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-profile-chip button { border: 0; background: transparent; color: var(--yt-faint); font-size: .9rem; line-height: 1; }
.st-profile-chip button:hover { color: #fff; }

.st-chart-shell { position: relative; min-height: 345px; margin: 0 .75rem .35rem; border: 1px solid rgba(255,255,255,.045); border-radius: 14px; background: radial-gradient(circle at 70% 15%, rgba(67,212,231,.04), transparent 30%), rgba(3,7,14,.34); overflow: hidden; }
.st-line-svg { display: block; width: 100%; height: 345px; overflow: visible; }
.st-chart-grid { stroke: rgba(165,191,219,.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-chart-axis { fill: #6d788b; font: 10px var(--font-grotesk); }
.st-chart-path { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--line-color) 35%, transparent)); }
.st-chart-dot { stroke: #0b111c; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.st-chart-empty, .st-network-empty { min-height: 320px; display: grid; place-content: center; justify-items: center; gap: .75rem; padding: 2rem; color: var(--yt-muted); text-align: center; }
.st-chart-empty b, .st-network-empty b { color: #eef3f8; font-size: 1rem; }
.st-chart-empty p, .st-network-empty p { max-width: 52ch; color: var(--yt-faint); font-size: .75rem; line-height: 1.5; }
.st-empty-orbit { position: relative; width: 62px; height: 62px; border: 1px solid rgba(67,212,231,.35); border-radius: 50%; box-shadow: 0 0 0 13px rgba(67,212,231,.035), 0 0 30px rgba(67,212,231,.07); }
.st-empty-orbit::after { content: ""; position: absolute; width: 8px; height: 8px; right: 3px; top: 7px; border-radius: 50%; background: var(--st-cyan); box-shadow: 0 0 12px var(--st-cyan); }
.st-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; min-height: 34px; padding: .3rem 1.35rem 1.05rem; }
.st-legend span { display: inline-flex; align-items: center; gap: .4rem; color: var(--yt-muted); font-size: .63rem; }
.st-legend i { width: 14px; height: 2px; border-radius: 2px; background: var(--legend-color); box-shadow: 0 0 7px var(--legend-color); }
.st-loading { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--yt-faint); font-size: .72rem; }
.st-loading span { width: 14px; height: 14px; border: 2px solid rgba(67,212,231,.2); border-top-color: var(--st-cyan); border-radius: 50%; animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

.compact-head { align-items: center; }
.compact-head select { max-width: 130px; min-height: 34px; padding: 0 .55rem; border: 1px solid var(--st-line); border-radius: 9px; background: #0c1320; color: var(--yt-muted); font: 600 .65rem var(--font-grotesk); }
.st-ranking { min-height: 410px; padding: 0 .85rem .7rem; }
.st-rank-row { display: grid; grid-template-columns: 23px 35px minmax(0,1fr) auto; gap: .55rem; align-items: center; min-height: 52px; padding: .45rem .3rem; border-bottom: 1px solid rgba(255,255,255,.055); }
.st-rank-row:hover { background: linear-gradient(90deg, rgba(67,212,231,.055), transparent); }
.st-rank-number { color: var(--yt-faint); font: 700 .7rem var(--font-grotesk); text-align: center; }
.st-rank-row:first-child .st-rank-number { color: #f1c65a; }
.st-rank-avatar { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: #111927; color: var(--st-cyan); font-size: .62rem; }
.st-rank-name { min-width: 0; }
.st-rank-name b { display: block; color: #e9eef4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .72rem; }
.st-rank-name small { color: var(--yt-faint); font-size: .6rem; }
.st-rank-value { color: #f2f6fa; font: 700 .72rem var(--font-grotesk); font-variant-numeric: tabular-nums; }
.st-rank-value small { display: block; color: #55d893; font-size: .56rem; text-align: right; }
.st-rank-value small.down { color: var(--st-red); }
.st-partial { opacity: .62; }
.st-panel-link { display: flex; justify-content: space-between; margin: 0 .9rem .9rem; padding: .72rem .8rem; border: 1px solid var(--st-line); border-radius: 10px; color: var(--st-cyan-soft); font-size: .7rem; }
.st-panel-link:hover { background: rgba(67,212,231,.07); border-color: rgba(67,212,231,.28); }

.st-network-panel { margin-top: 1rem; }
.st-network-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; color: var(--yt-faint); font-size: .64rem; }
.st-network-key span { display: inline-flex; align-items: center; gap: .35rem; }
.st-network-key i { width: 7px; height: 7px; border-radius: 50%; }
.st-network-key .newseur { background: var(--st-red); }.st-network-key .politique { background: var(--st-white); }.st-network-key .media { background: var(--st-blue); }
.st-network-stage { min-height: 480px; margin: 0 .9rem; border: 1px solid rgba(255,255,255,.045); border-radius: 15px; background: radial-gradient(circle at center, rgba(67,212,231,.065), transparent 52%), #070c14; overflow: hidden; touch-action: none; }
.st-network-svg { display: block; width: 100%; height: 480px; cursor: grab; }
.st-network-svg:active { cursor: grabbing; }
.st-edge { stroke: rgba(127,160,195,.28); vector-effect: non-scaling-stroke; }
.st-node circle { stroke-width: 2; vector-effect: non-scaling-stroke; }
.st-node text { fill: #dbe4ed; font: 600 9px var(--font-grotesk); text-anchor: middle; paint-order: stroke; stroke: #080d15; stroke-width: 3px; stroke-linejoin: round; }
.st-node { cursor: grab; }
.st-node:hover circle { filter: drop-shadow(0 0 8px currentColor); }
.st-network-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1.15rem 1rem; color: var(--yt-faint); font-size: .62rem; }

.st-method { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--st-line); border-radius: 14px; color: var(--yt-faint); background: rgba(10,15,24,.6); font-size: .7rem; line-height: 1.5; }
.st-method strong { color: #e9eff5; }
.st-method a { flex: none; color: var(--st-cyan-soft); font-weight: 600; }

@media (max-width: 1180px) {
  .st-dashboard-grid { grid-template-columns: 1fr; }
  .st-ranking { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 1rem; min-height: 0; }
  .st-ranking .st-loading { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .st-hero { grid-template-columns: 1fr; align-items: start; }
  .st-scope { justify-items: start; }
  .st-freshness { position: static; grid-column: 1 / -1; }
  .st-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .st-panel-head { flex-direction: column; }
  .st-metric-switch { justify-content: flex-start; }
  .st-compare-tools { width: 100%; justify-items: start; }
}
@media (max-width: 720px) {
  body.statitube .poly-main { padding-inline: .8rem; }
  .st-hero h1 { font-size: 3.4rem; }
  .st-kpis, .st-family-strip { grid-template-columns: 1fr; }
  .st-kpi { min-height: 112px; }
  .st-panel { border-radius: 16px; }
  .st-panel-head { padding: 1rem; }
  .st-picker { margin-inline: 1rem; }
  .st-selected { padding-inline: 1rem; }
  .st-metric-switch { width: 100%; }
  .st-metric-switch button { flex: 1; min-width: 72px; }
  .st-ranking { grid-template-columns: 1fr; }
  .st-network-stage { min-height: 390px; }
  .st-network-svg { height: 390px; }
  .st-network-foot, .st-method { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .st-loading span { animation: none; } }