/* Jardin IA — design system « domotique pro » (thème bleu nuit) */
:root {
  --fond: #0b1220; --panneau-fond: #0e1626;
  --carte: #141d2e; --carte2: #18233a; --bord: #243149;
  --texte: #e9eef7; --sourd: #8b9bb4; --accent: #6fce7e;
  --temp: #ff9f5a; --hum: #5ab8ff; --therm: #b07aff;
  --lux: #ffd75a; --eau: #4cc9e8;
  --attention: #e8b64c; --critique: #e0604c;
}
* { box-sizing: border-box; margin: 0; }
:root { color-scheme: dark; }
html { background: var(--fond); width: 100%; }
body { background: var(--fond); color: var(--texte); width: 100%;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
code { background: #0d1727; padding: 1px 6px; border-radius: 6px; font-size: .85em; }

/* ---- structure app : sidebar collée à gauche + contenu fluide ---- */
.app { display: flex; min-height: 100vh; width: 100%; justify-content: flex-start; }
aside.side { width: clamp(200px, 16vw, 250px); flex-shrink: 0; background: var(--panneau-fond);
  border-right: 1px solid var(--bord); padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; }
aside.side .logo { display: flex; align-items: center; gap: 8px; font-size: 1.1rem;
  font-weight: 700; color: var(--texte); text-decoration: none; padding: 6px 10px; margin-bottom: 18px; }
aside.side .item { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 10px; color: var(--sourd); text-decoration: none; font-size: .92rem;
  margin-bottom: 3px; border-left: 3px solid transparent; }
aside.side .item:hover { background: var(--carte); color: var(--texte); }
aside.side .item.actif { background: var(--carte2); color: var(--texte);
  border-left-color: var(--accent); font-weight: 600; }
aside.side .groupe { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sourd); opacity: .7; margin: 16px 12px 6px; }
main { flex: 1 1 auto; padding: 24px clamp(16px, 2.2vw, 44px); max-width: none; min-width: 0; }
@media (max-width: 860px) {
  .app { flex-direction: column; }
  aside.side { width: 100%; height: auto; position: static; display: flex;
    overflow-x: auto; padding: 10px; align-items: center; }
  aside.side .logo { margin: 0 10px 0 0; }
  aside.side .groupe { display: none; }
  aside.side .item { white-space: nowrap; border-left: 0; }
  main { padding: 18px; }
}

/* ---- entête de page ---- */
.entete { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.entete h1 { font-size: 1.35rem; }
.entete .etat-live { color: var(--sourd); font-size: .82rem; display: flex; align-items: center; gap: 7px; }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  display: inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---- cartes ---- */
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 16px 18px; }
.titre-carte { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sourd); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.grande { font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.grande small { font-size: 1rem; color: var(--sourd); font-weight: 400; }
.sous-valeur { color: var(--sourd); font-size: .85rem; margin-top: 2px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.pill.ok { background: #14301f; color: var(--accent); }
.pill.warn { background: #33290f; color: var(--attention); }
.pill.ko { background: #331414; color: var(--critique); }
.pill.off { background: #1b2436; color: var(--sourd); }

/* ---- donut (anneau de progression, pur CSS) ---- */
.donut { --v: 75; --c: var(--accent); position: relative; width: 92px; height: 92px;
  border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), #22304a 0);
  display: grid; place-items: center; flex-shrink: 0; }
.donut::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--carte); }
.donut b { position: relative; font-size: 1.25rem; }
.donut span { position: relative; font-size: .62rem; color: var(--sourd); }
.donut .centre { position: relative; text-align: center; }
.ligne-donuts { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- graphiques + panneaux de réglages ---- */
.section { display: grid; grid-template-columns: 1fr 300px; gap: 14px; margin-bottom: 16px; }
@media (max-width: 980px) { .section { grid-template-columns: 1fr; } }
.graphe { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 16px 18px; }
.graphe h2 { font-size: .95rem; }
.graphe .sous { font-size: .76rem; color: var(--sourd); margin-bottom: 8px; }
.panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px;
  padding: 14px 16px; align-self: start; }
.panneau h3 { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px; }
.panneau .bloc { margin-bottom: 13px; }
.panneau label { color: var(--sourd); font-size: .8rem; display: block; }
.panneau .val { color: var(--accent); font-weight: 700; }
.panneau input[type=range] { width: 100%; accent-color: var(--accent); margin-top: 6px; }
.panneau .note { color: var(--sourd); font-size: .71rem; margin-top: 3px; line-height: 1.35; }

/* ---- sélecteur de plage ---- */
.plages { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.plages button { background: var(--carte); color: var(--sourd); border: 1px solid var(--bord);
  border-radius: 8px; padding: 5px 12px; font-size: .82rem; cursor: pointer; }
.plages button.actif { background: var(--accent); color: #06210f; border-color: var(--accent); font-weight: 700; }

/* ---- divers ---- */
table.props { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.props td, table.props th { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--bord); }
table.props th { color: var(--sourd); font-weight: 500; }
table.props td:first-child { color: var(--accent); white-space: nowrap; }
.vide-pro { border: 1px dashed var(--bord); border-radius: 14px; padding: 34px;
  text-align: center; color: var(--sourd); background: var(--carte); }
.vide-pro .icone { font-size: 2rem; margin-bottom: 8px; }
footer { color: var(--sourd); font-size: .78rem; margin-top: 18px; }