/* Traffic simulator — styles du tableau de bord, adaptés au thème Digital Bridge RDC (kit.css) */
:root{
  --color-fg:var(--ink);--color-fg-muted:var(--muted);--color-bg:var(--bg);--color-panel:var(--surface);--color-border-line:var(--border);
  --color-ok:#15803D;--color-warn:#B45309;--color-bad:#DC2626;
  --cds-gap-xs:4px;--cds-gap-sm:8px;--cds-gap-md:16px;--cds-pad-xs:6px;--cds-pad-sm:10px;--cds-pad-md:14px;--cds-pad-lg:18px;--cds-radius:12px;
  --cds-font-size-body:.9375rem;--cds-font-size-caption:.8125rem;--cds-font-size-heading:1.125rem;--cds-font-size-title:1.75rem;
  --cds-font-weight-medium:600;--cds-ease-out:cubic-bezier(.2,.8,.2,1);
  --cds-surface-popover:var(--surface);--cds-border:var(--border);--cds-shadow-popover:0 8px 24px rgba(15,23,42,.16);--cds-text-secondary:var(--muted);
  --cds-chart-axis:#94A3B8;--cds-chart-grid:var(--border);--cds-chart-reference:#94A3B8;
  --font-anthropic-sans:var(--sans);--font-anthropic-serif:var(--serif);
}
:root[data-theme="dark"]{--color-ok:#34D399;--color-warn:#FBBF24;--color-bad:#F87171;--cds-chart-axis:#6B7699;--cds-shadow-popover:0 8px 24px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--color-ok:#34D399;--color-warn:#FBBF24;--color-bad:#F87171;--cds-chart-axis:#6B7699}}

/* ---------- Tableau de bord (styles d'origine) ---------- */
/* ---------- Mise en page générale ---------- */
.kt{font-family:var(--font-anthropic-sans);color:var(--color-fg);container-type:inline-size;display:flex;flex-direction:column;gap:var(--cds-gap-md);font-size:var(--cds-font-size-body)}
.kt *{box-sizing:border-box}
.kt-banner{display:flex;align-items:center;gap:var(--cds-gap-sm);padding:var(--cds-pad-xs) var(--cds-pad-sm);border:1px dashed var(--color-warn);border-radius:var(--cds-radius);color:var(--color-warn);font-size:var(--cds-font-size-caption)}
.kt-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--cds-gap-md)}
.kt-title{font-family:var(--font-anthropic-serif);font-weight:400;font-size:var(--cds-font-size-title);margin:0;line-height:1.2}
.kt-takeaway{margin:var(--cds-gap-xs) 0 0;color:var(--color-fg-muted);max-width:60rem}
.kt-clockbox{text-align:right}
.kt-clock{font-family:var(--font-anthropic-serif);font-size:var(--cds-font-size-title);font-variant-numeric:tabular-nums;line-height:1.1}
.kt-day{color:var(--color-fg-muted);font-size:var(--cds-font-size-caption)}
.kt-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--cds-font-size-caption);color:var(--color-bad);font-weight:var(--cds-font-weight-medium)}
.kt-live i{width:.5rem;height:.5rem;border-radius:50%;background:var(--color-bad);display:inline-block}
.kt-live.is-paused{color:var(--color-fg-muted)}.kt-live.is-paused i{background:var(--color-fg-muted)}
@media (prefers-reduced-motion:no-preference){.kt-live:not(.is-paused) i{animation:kt-blink 1.4s infinite}}
@keyframes kt-blink{50%{opacity:.25}}

/* ---------- Barre d'outils ---------- */
.kt-toolbar{display:flex;flex-wrap:wrap;gap:var(--cds-gap-sm);align-items:flex-end;padding:var(--cds-pad-sm) var(--cds-pad-md);background:var(--color-panel);border:1px solid var(--color-border-line);border-radius:var(--cds-radius)}
.kt-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.kt-field>span{font-size:var(--cds-font-size-caption);color:var(--color-fg-muted)}
.kt-btn,.kt-select,.kt-input{font:inherit;font-size:var(--cds-font-size-body);color:var(--color-fg);background:var(--color-bg);border:1px solid var(--color-border-line);border-radius:var(--cds-radius);padding:6px 10px;min-height:34px}
.kt-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.kt-btn:hover{border-color:var(--color-fg-muted)}
.kt-btn[aria-pressed=true]{background:var(--color-fg);color:var(--color-bg);border-color:var(--color-fg)}
.kt-btn.kt-icon{padding:6px;width:34px;justify-content:center}
.kt-search{flex:1 1 14rem}
.kt-input{width:100%}
.kt-seg{display:inline-flex}.kt-seg .kt-btn{border-radius:0;margin-left:-1px}.kt-seg .kt-btn:first-child{border-radius:var(--cds-radius) 0 0 var(--cds-radius);margin:0}.kt-seg .kt-btn:last-child{border-radius:0 var(--cds-radius) var(--cds-radius) 0}

/* ---------- Cartes ---------- */
.kt-card{background:var(--color-panel);border:1px solid var(--color-border-line);border-radius:var(--cds-radius);padding:var(--cds-pad-lg);min-width:0}
.kt-card h2{font-size:var(--cds-font-size-heading);font-weight:var(--cds-font-weight-medium);margin:0}
.kt-note{font-size:var(--cds-font-size-caption);color:var(--color-fg-muted);margin:2px 0 var(--cds-gap-sm)}
.kt-cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--cds-gap-sm);flex-wrap:wrap}

/* ---------- Indicateurs ---------- */
.kt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:var(--cds-gap-md)}
.kt-kpi{display:flex;flex-direction:column;gap:2px;padding:var(--cds-pad-md) var(--cds-pad-lg)}
.kt-kpi .lbl{font-size:var(--cds-font-size-caption);color:var(--color-fg-muted)}
.kt-kpi .val{font-family:var(--font-anthropic-serif);font-weight:400;font-size:var(--cds-font-size-title);font-variant-numeric:tabular-nums;line-height:1.15}
.kt-kpi .val small{font-family:var(--font-anthropic-sans);font-size:var(--cds-font-size-caption);color:var(--color-fg-muted);margin-left:3px}
.kt-kpi .dlt{font-size:var(--cds-font-size-caption);font-variant-numeric:tabular-nums;color:var(--color-fg-muted)}
.kt-kpi .dlt.good{color:var(--color-ok)}.kt-kpi .dlt.bad{color:var(--color-bad)}
.kt-gauge{display:flex;align-items:center;gap:var(--cds-gap-sm)}
.kt-gauge svg{width:84px;height:50px;flex:none}

/* ---------- Carte + panneau latéral ---------- */
.kt-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cds-gap-md)}
@container (min-width:880px){.kt-main{grid-template-columns:minmax(0,1fr) 21rem}}
.kt-mapcard{padding:0;overflow:hidden;display:flex;flex-direction:column}
.kt-mapcard .kt-cardhead{padding:var(--cds-pad-md) var(--cds-pad-lg) 0}
.kt-mapbox{position:relative;min-height:340px;flex:1}
.kt-mapbox svg{display:block;width:100%;height:auto;cursor:grab;touch-action:none}
.kt-mapbox svg:active{cursor:grabbing}
.kt-zoomctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.kt-legend{display:flex;flex-wrap:wrap;gap:var(--cds-gap-md);font-size:var(--cds-font-size-caption);color:var(--color-fg-muted);padding:var(--cds-pad-sm) var(--cds-pad-lg) var(--cds-pad-md)}
.kt-legend span{display:inline-flex;align-items:center;gap:6px}
.kt-legend i{display:inline-block;width:18px;height:4px;border-radius:2px}
.kt-seg-line{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 1.2s ease,opacity .4s ease,stroke-width .2s}
.kt-seg-casing{fill:none;stroke:var(--color-bg);stroke-linecap:round;stroke-linejoin:round}
.kt-seg-flow{fill:none;stroke:var(--color-bg);stroke-opacity:.85;stroke-linecap:round;stroke-dasharray:.5 11;pointer-events:none}
.kt-seg-hit{fill:none;stroke:transparent;stroke-linecap:round;cursor:pointer}
.kt-seg.is-dim{opacity:.18}
.kt-seg.is-sel .kt-seg-casing{stroke:var(--color-fg)}
.kt-commune{font-size:11px;fill:var(--color-fg-muted);text-anchor:middle;pointer-events:none;letter-spacing:.04em;text-transform:uppercase}
.kt-marker{cursor:pointer}
.kt-marker text{font-size:10px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.kt-cam-icon rect{fill:var(--color-fg)}.kt-cam-icon path{fill:var(--color-bg)}
.kt-inc-ring{fill:none;stroke:var(--color-bad);stroke-width:2}
@media (prefers-reduced-motion:no-preference){.kt-inc-ring{animation:kt-pulse 1.8s var(--cds-ease-out) infinite;transform-box:fill-box;transform-origin:center}}
@keyframes kt-pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}
.kt-tip{position:absolute;pointer-events:none;background:var(--cds-surface-popover);border:1px solid var(--cds-border);border-radius:var(--cds-radius);box-shadow:var(--cds-shadow-popover);padding:var(--cds-pad-xs) var(--cds-pad-sm);font-size:var(--cds-font-size-caption);max-width:16rem;z-index:5;display:none}
.kt-tip b{font-weight:var(--cds-font-weight-medium)}
.kt-tip .sub{color:var(--cds-text-secondary)}

/* ---------- Panneau de détail ---------- */
.kt-side{display:flex;flex-direction:column;gap:var(--cds-gap-sm)}
.kt-detail h3{font-size:var(--cds-font-size-heading);font-weight:var(--cds-font-weight-medium);margin:0 0 2px}
.kt-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--cds-font-size-caption);font-weight:var(--cds-font-weight-medium);padding:2px 8px;border-radius:999px;border:1px solid currentColor}
.kt-badge.fluide{color:var(--color-ok)}.kt-badge.ralenti{color:var(--color-warn)}.kt-badge.bloque{color:var(--color-bad)}
.kt-dl{display:grid;grid-template-columns:auto 1fr;gap:4px var(--cds-gap-md);margin:var(--cds-gap-sm) 0;font-size:var(--cds-font-size-body)}
.kt-dl dt{color:var(--color-fg-muted)}.kt-dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.kt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kt-list li{display:flex;justify-content:space-between;gap:var(--cds-gap-sm);padding:6px 0;border-top:1px solid var(--color-border-line);cursor:pointer;font-size:var(--cds-font-size-body)}
.kt-list li:hover{color:var(--color-fg-muted)}
.kt-list li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.kt-spark{width:100%;height:56px;display:block}

/* ---------- Webcams ---------- */
.kt-cams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:var(--cds-gap-md)}
.kt-cam{background:none;border:1px solid var(--color-border-line);border-radius:var(--cds-radius);padding:0;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column}
.kt-cam:hover{border-color:var(--color-fg-muted)}
.kt-cam canvas{width:100%;aspect-ratio:16/9;display:block;background:#111}
.kt-cam .cap{display:flex;justify-content:space-between;gap:6px;padding:6px 8px;font-size:var(--cds-font-size-caption)}
.kt-cam .cap span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-dialog{border:1px solid var(--color-border-line);border-radius:var(--cds-radius);background:var(--color-panel);color:var(--color-fg);padding:var(--cds-pad-md);width:min(960px,94vw);max-height:94vh}
.kt-dialog::backdrop{background:rgba(0,0,0,.6)}
.kt-dialog canvas{width:100%;aspect-ratio:16/9;display:block;border-radius:var(--cds-radius);background:#111}
.kt-dialog .kt-cardhead{margin-bottom:var(--cds-gap-sm)}
.kt-dialog .kt-dl{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--cds-gap-sm)}
.kt-dialog .kt-dl div{display:flex;flex-direction:column}
.kt-dialog .kt-dl dd{text-align:left;font-family:var(--font-anthropic-serif);font-size:var(--cds-font-size-heading)}

/* ---------- Grilles du bas ---------- */
.kt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:var(--cds-gap-md)}
.kt-chartbox{position:relative;min-height:220px}
.kt-chartbox svg{display:block;width:100%}
.kt-axis text{fill:var(--color-fg-muted);font-size:var(--cds-font-size-caption)}
.kt-axis line,.kt-axis path{stroke:var(--cds-chart-axis)}
.kt-grid-line{stroke:var(--cds-chart-grid)}
.kt-table{width:100%;border-collapse:collapse;font-size:var(--cds-font-size-body);font-variant-numeric:tabular-nums}
.kt-table th{text-align:left;font-weight:var(--cds-font-weight-medium);color:var(--color-fg-muted);font-size:var(--cds-font-size-caption);padding:4px 6px;border-bottom:1px solid var(--color-border-line);position:sticky;top:0;background:var(--color-panel)}
.kt-table td{padding:6px;border-bottom:1px solid var(--color-border-line);vertical-align:top}
.kt-table td.num,.kt-table th.num{text-align:right}
.kt-table tr.clk{cursor:pointer}.kt-table tr.clk:hover td{background:var(--color-bg)}
.kt-scroll{max-height:260px;overflow:auto}
.kt-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:6px;vertical-align:middle}
.kt-muted{color:var(--color-fg-muted)}
.kt-bad{color:var(--color-bad)}.kt-warn{color:var(--color-warn)}.kt-ok{color:var(--color-ok)}
.kt-foot{font-size:var(--cds-font-size-caption);color:var(--color-fg-muted)}
.kt-fail{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;color:var(--color-fg-muted);font-size:var(--cds-font-size-caption)}
.kt-fail i{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-bad)}
@container (max-width:560px){.kt-hide-narrow{display:none}.kt-clockbox{text-align:left}}

/* ---------- Habillage de marque ---------- */
.kt-title{font-weight:700;letter-spacing:-.02em;color:var(--head);font-size:clamp(1.35rem,2.4vw,1.75rem)}
.kt-clock,.kt-kpi .val{font-weight:600;letter-spacing:-.01em}
.kt-card,.kt-toolbar{box-shadow:var(--shadow)}
.kt-card h2,.kt-detail h3{font-family:var(--serif);letter-spacing:-.01em;font-weight:700;color:var(--head)}
.kt-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.kt-btn:hover{border-color:var(--bright)}
.kt-banner{background:var(--surface)}
.kt-seg-casing{stroke:var(--surface)}
.kt-seg-flow{stroke:var(--surface)}
.kt-dialog{background:var(--surface)}
.kt-table th{background:var(--surface)}
.kt-card{background:var(--surface)}
.kt-toolbar{background:var(--surface)}
.kt-mapbox svg rect{fill:var(--panel)}
.dash-skeleton{color:transparent!important;border-radius:6px;background:linear-gradient(90deg,var(--border),var(--bg),var(--border));background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){.dash-skeleton{animation:kt-shimmer 1.4s linear infinite}}
@keyframes kt-shimmer{to{background-position:-200% 0}}
.kt-river{font-style:italic}
.kt-detail .kt-btn{white-space:normal;text-align:left;max-width:100%;height:auto}
.kt-detail h3,.kt-list li span:first-child{overflow-wrap:anywhere}

/* ---------- Mise en page de la page ---------- */
.shell{max-width:1360px}
.page-hero{padding-block:34px 18px;max-width:880px}
.page-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.1;text-wrap:balance}
.page-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,#41B6E655 62%)}
.page-hero p{color:var(--muted);margin-top:14px;font-size:16px;max-width:720px}
main.shell{padding-bottom:36px}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---------- Carte « reveal » du prompt (repliée par défaut) ---------- */
.prompt-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.prompt-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 20px;min-height:68px}
.prompt-card summary::-webkit-details-marker{display:none}
.prompt-card summary:hover{background:var(--panel)}
.pc-ico{flex:none;width:40px;height:40px;border-radius:10px;background:var(--hero);color:var(--glyph);display:grid;place-items:center;font-size:18px}
.pc-txt{flex:1;min-width:0}
.pc-txt strong{display:block;font-family:var(--serif);font-size:17px;letter-spacing:-.01em;color:var(--head)}
.pc-txt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.pc-chev{flex:none;transition:transform .2s;color:var(--muted)}
.prompt-card[open] .pc-chev{transform:rotate(180deg)}
.pc-body{border-top:1px solid var(--border);padding:16px 20px 20px}
.pc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.pc-lang{font:700 11px var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--deep);background:var(--soft);border-radius:5px;padding:4px 8px}
.pc-text{margin:0;max-height:min(60vh,520px);overflow:auto;white-space:pre-wrap;word-break:break-word;font:13.5px/1.65 var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.pc-text b{color:var(--head)}
@media (prefers-reduced-motion:reduce){.pc-chev{transition:none}}
@media (max-width:520px){.prompt-card summary{padding:14px 14px}.pc-body{padding:14px}.pc-ico{display:none}}