/* DiaSurv - diagramme unique pilote par le scroll. Ivoire, bleu nuit, magenta (#C2185B) parcimonieux, traits fins, sans cartes ni ombres. Tout est sous .dss */
.dss { --dss-bg: #f5f5f3; --dss-ink: #202022; --dss-muted: #57575b; --dss-line: rgba(32, 32, 34, .16); --dss-line2: rgba(32, 32, 34, .42); --dss-mag: #ed3b82; --dss-mag-text: #d11868; --dss-cool: #302e82; --dss-cool-ink: #302e82; --dss-top: 82px;
  --dss-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --dss-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  position: relative; background: var(--dss-bg); color: var(--dss-ink); font-family: var(--dss-font); -webkit-font-smoothing: antialiased; }
.dss *, .dss *::before, .dss *::after { box-sizing: border-box; }
.dss-sticky { position: sticky; top: var(--dss-top); height: calc(100vh - var(--dss-top)); height: calc(100dvh - var(--dss-top)); min-height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dss-frame { position: relative; overflow: hidden; flex: none; }
.dss-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dss-canvas { position: absolute; left: 0; top: 0; display: block; }
.dss-abs { position: absolute; will-change: opacity; }
.dss-cap { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--dss-muted); }
.dss-cap b { color: var(--dss-mag-text); font-weight: 700; }
.dss-micro { font-size: 11.5px; line-height: 1.4; color: var(--dss-muted); }
/* bloc DiaSurv : cadre fin, reperes magenta aux coins */
.dss-ai { border: 1px solid var(--dss-line2); }
.dss-ai::before, .dss-ai::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--dss-mag); }
.dss-ai::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } .dss-ai::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.dss-ai-t { position: absolute; left: 12px; top: 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--dss-mag-text); }
.dss-st { position: absolute; left: 12px; right: 10px; font-size: 9.5px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--dss-muted); transition: color .3s; }
.dss-st span { display: block; margin-top: 2px; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.dss-st[data-on="1"] { color: var(--dss-mag-text); }
/* rapport */
.dss-rep { border-left: 1px solid var(--dss-line); padding-left: 18px; }
.dss-rep h3 { margin: 0; font-size: 19px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.dss-badge { display: inline-block; padding: 4px 10px; border-radius: 2px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border: 1px solid; }
.dss-badge[data-risk="HIGH"] { background: var(--dss-mag); border-color: var(--dss-mag); color: #fff; }
.dss-badge[data-risk="LOW"] { background: rgba(201, 220, 242, .6); border-color: var(--dss-cool); color: var(--dss-cool-ink); }
.dss-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--dss-line); }
.dss-row:last-child { border-bottom: 1px solid var(--dss-line); }
.dss-row .ep { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .dss-row .ep small { display: block; font-size: 10.5px; font-weight: 400; color: var(--dss-muted); letter-spacing: 0; }
.dss-row .val { white-space: nowrap; font-size: 27px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .dss-row .val small { font-size: 13px; font-weight: 500; }
.dss-svg { display: block; overflow: visible; } .dss-svg text { font-family: var(--dss-font); fill: var(--dss-muted); font-size: 10px; }
.dss-ramp { display: inline-block; width: 110px; height: 6px; vertical-align: middle; margin: 0 6px; background: linear-gradient(90deg, #c9dcf2, #848ad0, #302e82, #ed3b82); }
@media (prefers-reduced-motion: reduce) { .dss * { transition: none !important; } }

@media (max-width: 880px) { .dss { --dss-top: 70px; } }