:root {
  --vert: #089981; --rouge: #F23645; --gris: #9E9E9E;
  --texte: #131722; --doux: #787B86; --bord: #e0e3eb; --fond: #ffffff; --fond2: #f6f7f9;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--texte); background: var(--fond);
  display: flex; min-height: 100vh; font-size: 15px;
}
aside {
  width: 290px; flex: none; background: var(--fond2); border-right: 1px solid var(--bord);
  padding: 20px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-head { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 26px; margin: 0 0 4px; }
#menu { display: none; border: 1px solid var(--bord); background: #fff; border-radius: 6px; font-size: 18px; padding: 2px 10px; cursor: pointer; }
.cap { color: var(--doux); font-size: 13px; line-height: 1.45; margin: 6px 0; }
.lab { display: block; font-size: 14px; margin: 18px 0 6px; }
select {
  width: 100%; padding: 8px; font-size: 14px; border: 1px solid var(--bord); border-radius: 6px; background: #fff; color: var(--texte);
}
hr { border: 0; border-top: 1px solid var(--bord); margin: 18px 0 12px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; background: #fff; }
.seg button {
  border: 0; border-right: 1px solid var(--bord); background: none; padding: 6px 12px; font-size: 14px; cursor: pointer; color: var(--texte);
}
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--vert); color: #fff; }
.seg.petit button { padding: 6px 8px; font-size: 13px; }

main { flex: 1; min-width: 0; padding: 22px 32px 40px; }
h2 { margin: 0 0 14px; font-size: 30px; }
h2 small { color: var(--doux); font-size: 0.55em; font-weight: 400; margin-left: 6px; }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.metric .l { font-size: 13px; color: var(--doux); }
.metric .v { font-size: 26px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric .d { font-size: 13px; margin-top: 2px; display: inline-block; padding: 1px 6px; border-radius: 10px; }
.d.up { color: var(--vert); background: #e6f4f1; } .d.down { color: var(--rouge); background: #fdecee; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 14px; overflow-x: auto; }
.tabs button {
  border: 0; background: none; padding: 10px 12px; font-size: 14px; cursor: pointer; color: var(--texte);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button.on { border-bottom-color: var(--rouge); color: var(--rouge); }
section { display: none; }
section.on { display: block; }

.table-wrap { overflow-x: auto; border: 1px solid var(--bord); border-radius: 6px; max-height: 560px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 6px 10px; border-bottom: 1px solid #f0f2f6; text-align: left; white-space: nowrap; }
th { background: var(--fond2); position: sticky; top: 0; font-weight: 500; color: var(--doux); cursor: pointer; user-select: none; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
#classement tbody tr { cursor: pointer; }
#classement tbody tr:hover { background: #f3f8f7; }
.barre { display: flex; align-items: center; gap: 6px; min-width: 96px; }
.barre span.b { flex: 1; height: 6px; background: #eef0f4; border-radius: 3px; overflow: hidden; }
.barre span.b i { display: block; height: 100%; background: var(--vert); }
.barre.rouge span.b i { background: var(--rouge); } .barre.gris span.b i { background: var(--gris); }
.barre em { font-style: normal; width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.prev { display: grid; grid-template-columns: 2fr 3fr; gap: 28px; align-items: start; }
.bars { display: flex; align-items: flex-end; gap: 18px; height: 260px; padding: 10px 10px 0; border-bottom: 1px solid var(--bord); }
.bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bars i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.bars b { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
.bars-l { display: flex; gap: 18px; padding: 6px 10px; font-size: 13px; color: var(--doux); }
.bars-l span { flex: 1; text-align: center; }
.md { line-height: 1.55; }
.md h3 { font-size: 20px; margin: 0 0 10px; }
.md table { font-size: 13px; margin: 10px 0; display: block; overflow-x: auto; }
.md th { cursor: default; white-space: normal; position: static; }
.info { background: #eef4fb; color: #1c4f8a; padding: 12px 14px; border-radius: 6px; }
.ligne { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ligne input[type=range] { width: 260px; accent-color: var(--vert); }
.bouton {
  display: inline-block; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--bord); border-radius: 6px;
  color: var(--texte); text-decoration: none; font-size: 14px;
}
.bouton:hover { border-color: var(--vert); color: var(--vert); }
#graph { min-height: 300px; }

@media (max-width: 900px) {
  body { display: block; }
  aside { position: static; width: auto; height: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--bord); }
  #menu { display: block; }
  #reglages { display: none; }
  aside.ouvert #reglages { display: block; }
  main { padding: 16px; }
  h2 { font-size: 24px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric .v { font-size: 20px; }
  .prev { grid-template-columns: 1fr; }
}