:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#172033;
  background:#f4f6f8;
  --chart-grid:#e6eaf0;
  --chart-text:#667085;
  --temp-line:#d05c36;
  --humidity-line:#2877a8;
  --pressure-line:#6b5ca5;
}
*{box-sizing:border-box}
body{margin:0}
button{font:inherit}
.wrap{max-width:1280px;margin:auto;padding:32px}
header{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:32px}
h1{margin:0;font-size:2rem}
p{margin:.35rem 0;color:#667085}
.actions{display:flex;align-items:center;gap:16px}
.status{font-size:.9rem;color:#39734d}
button{border:0;border-radius:10px;padding:11px 16px;font-weight:700;background:#172033;color:white;cursor:pointer}
button:disabled{opacity:.6}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.card{background:white;border:1px solid #e4e7ec;border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(16,24,40,.04)}
.card-head{display:flex;justify-content:space-between;gap:12px}
.card-head>div{min-width:0}
.card-head strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-head small{display:block;color:#667085;margin-top:4px}
.live-badge{color:#48a868;font-size:.8rem}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.metrics>div{background:#f8fafc;border-radius:12px;padding:16px}
.value{font-size:2.2rem;font-weight:750}
.unit{font-size:1.1rem;margin-left:3px}
.metrics small{display:block;color:#667085;margin-top:4px}
.card footer{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #eef1f4;padding-top:14px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 12px;color:#667085;font-size:.82rem}
.history-button{padding:8px 11px;background:#eef2f6;color:#283548;white-space:nowrap}
.empty{background:white;padding:40px;border-radius:16px;text-align:center;color:#667085}

.history-dialog{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:18px;box-shadow:0 24px 70px rgba(16,24,40,.25);color:#172033}
.history-dialog::backdrop{background:rgba(15,23,42,.48)}
.history-shell{padding:24px;overflow:auto;max-height:calc(100vh - 32px)}
.history-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.history-head h2{margin:.1rem 0 0;font-size:1.45rem}
.eyebrow{margin:0;color:#667085;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.history-subtitle{font-size:.9rem}
.icon-button{width:40px;height:40px;padding:0;border-radius:50%;background:#eef2f6;color:#344054;font-size:1.6rem;line-height:1}
.periods{display:flex;gap:8px;margin:20px 0}
.period{background:#eef2f6;color:#344054;padding:9px 14px}
.period.active{background:#172033;color:white}
.history-state{padding:48px 20px;text-align:center;color:#667085;background:#f8fafc;border-radius:14px}
.chart-card{margin-top:16px;border:1px solid #e4e7ec;border-radius:14px;padding:16px;background:#fff}
.chart-title-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:8px}
.chart-title-row>div{display:flex;align-items:center;gap:8px}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.temp-dot{background:var(--temp-line)}
.humidity-dot{background:var(--humidity-line)}
.pressure-dot{background:var(--pressure-line)}
.chart-stats{font-size:.82rem;color:#667085;text-align:right}
.canvas-wrap{width:100%;overflow:hidden}
canvas{display:block;max-width:100%}

@media(max-width:720px){
  .wrap{padding:18px}
  header{align-items:flex-start;flex-direction:column}
  .actions{width:100%;justify-content:space-between}
  .metrics{grid-template-columns:1fr}
  .card footer{align-items:flex-start;flex-direction:column}
  .history-button{width:100%}
  .history-shell{padding:18px}
  .chart-title-row{align-items:flex-start;flex-direction:column}
  .chart-stats{text-align:left}
}

.zigbee-name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;color:#98a2b3}
.card-buttons{display:flex;gap:8px;margin-left:auto}
.rename-button{padding:8px 11px;background:#fff;color:#344054;border:1px solid #d0d5dd;white-space:nowrap}
@media(max-width:720px){.card-buttons{width:100%}.card-buttons button{flex:1}}

.pressure-value{font-size:1.85rem}
.battery{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.battery-shell{position:relative;width:26px;height:13px;border:2px solid currentColor;border-radius:3px;display:inline-block;padding:1px}
.battery-shell::after{content:"";position:absolute;right:-5px;top:3px;width:3px;height:5px;background:currentColor;border-radius:0 2px 2px 0}
.battery-fill{display:block;height:100%;border-radius:1px;background:currentColor}
.battery-good{color:#39734d}
.battery-medium{color:#9a6700}
.battery-low{color:#b42318}
.battery-unknown{color:#98a2b3}
@media(max-width:900px){.metrics{grid-template-columns:1fr 1fr}.metrics>div:last-child{grid-column:1/-1}}

/* 1.3.1 — métriques compactes pour éviter les débordements */
.metrics{gap:9px}
.metrics>div{min-width:0;padding:13px 11px;overflow:hidden}
.value{font-size:1.8rem;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.unit{font-size:.9rem;margin-left:2px;white-space:nowrap}
.pressure-value{font-size:1.42rem;letter-spacing:-.02em}
.metrics>div:nth-child(3) .unit{font-size:.76rem}
.metrics small{font-size:.78rem}

@media(max-width:720px){
  .value{font-size:1.7rem}
  .pressure-value{font-size:1.45rem}
  .unit{font-size:.85rem}
  .metrics>div:nth-child(3) .unit{font-size:.78rem}
}