:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a;
  --fg:#e6e9ef; --mut:#98a1b3; --acc:#4d9dff;
  --ok:#3ecf8e; --warn:#f5a524; --dan:#f0506e; --uncert:#8b93a7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand h1{font-size:18px;margin:0;letter-spacing:-.2px}
.brand .sub{color:var(--mut);font-size:12.5px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mut);flex:0 0 auto}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.bad{background:var(--dan)}
.modelinfo{color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums}

.tabs{display:flex;gap:2px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--panel)}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);
  padding:11px 16px;cursor:pointer;font-size:14px}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg);border-bottom-color:var(--acc)}

.panel{display:none;padding:22px;max-width:1120px;margin:0 auto}
.panel.active{display:block}

.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
button{font:inherit;border-radius:7px;cursor:pointer;border:1px solid var(--line);
  padding:9px 15px;background:var(--panel2);color:var(--fg)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--acc);border-color:var(--acc);color:#08111f;font-weight:600}
button.ghost{background:transparent}
button.mini{padding:3px 9px;font-size:12px;float:right}
button.link{background:none;border:0;color:var(--acc);padding:0;text-decoration:underline}
.status{color:var(--mut);font-size:13px}
.hint{color:var(--mut);font-size:12.5px;margin:6px 0 14px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.card.big{display:flex;flex-direction:column;justify-content:center;min-height:158px;
  transition:border-color .25s, background .25s}
.card.big.alert{border-color:var(--dan);background:linear-gradient(180deg,rgba(240,80,110,.14),transparent)}
.card.big.event{border-color:var(--warn)}
.card.big.uncertain{border-color:var(--uncert)}
.label{font-size:27px;font-weight:650;letter-spacing:-.5px}
.conf{color:var(--mut);margin-top:4px;font-size:13px}
.conf span{color:var(--fg);font-weight:600}
.metaline{color:var(--mut);font-size:12px;margin-top:10px;font-variant-numeric:tabular-nums}
.meter{height:7px;background:var(--panel2);border-radius:4px;overflow:hidden;margin-top:12px}
.meter .bar{height:100%;width:0;background:var(--acc);transition:width .18s, background .18s}

.probs .p{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:13px}
.probs .p .n{flex:0 0 168px;color:var(--mut)}
.probs .p .t{flex:1;height:7px;background:var(--panel2);border-radius:4px;overflow:hidden}
.probs .p .t i{display:block;height:100%;width:0;background:var(--acc);transition:width .18s}
.probs .p .v{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums;color:var(--mut)}

table.hist{width:100%;border-collapse:collapse;font-size:13px}
table.hist th{text-align:left;color:var(--mut);font-weight:500;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.5px;padding:7px 8px;border-bottom:1px solid var(--line)}
table.hist td{padding:8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
table.hist tr.empty td{color:var(--mut);text-align:center;padding:18px}
.badge{padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600}
.badge.alert{background:rgba(240,80,110,.16);color:var(--dan)}
.badge.event{background:rgba(245,165,36,.16);color:var(--warn)}
.badge.uncertain{background:rgba(139,147,167,.16);color:var(--uncert)}

.drop{border:2px dashed var(--line);border-radius:12px;padding:34px;text-align:center;
  margin-bottom:14px;transition:border-color .2s,background .2s}
.drop.over{border-color:var(--acc);background:rgba(77,157,255,.06)}
.drop p{margin:5px 0}
canvas{width:100%;display:block;border-radius:7px;background:var(--panel2)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--mut)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.thr{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.thr label{flex:0 0 190px;font-size:13px}
.thr input[type=range]{flex:1;accent-color:var(--acc)}
.thr .v{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums;color:var(--mut)}


/* ---- selecteur de version du modele -------------------------------------
   Place dans l'en-tete, visible en permanence : savoir QUELLE version parle
   est indispensable des lors qu'on en compare deux sur le meme son. */
.modelsel { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
            justify-content:flex-end; }
.modelsel label { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
                  opacity:.65; }
.modelsel select { font:inherit; font-size:.85rem; padding:.3rem .5rem;
                   border-radius:6px; border:1px solid rgba(128,138,158,.45);
                   background:rgba(128,138,158,.10); color:inherit; cursor:pointer; }
.modelsel select:focus { outline:2px solid #4d9dff; outline-offset:1px; }
.modelsel .modelinfo { flex-basis:100%; text-align:right; }
.modelnote { padding:.55rem .9rem; font-size:.85rem; line-height:1.45;
             border-left:3px solid #f5a524; background:rgba(245,165,36,.10); }

@media(max-width:620px){
  /* Sur telephone l'en-tete passe en colonne : le selecteur doit rester
     atteignable au pouce et lisible, pas comprime dans un coin. */
  header{flex-direction:column;align-items:flex-start;gap:10px}
  .modelsel{width:100%;justify-content:flex-start}
  .modelsel select{flex:1;min-height:42px;font-size:16px}  /* 16px : evite le
                     zoom automatique de Safari iOS a la mise au point */
  .modelsel .modelinfo{text-align:left}
  .tabs{overflow-x:auto}
}