/* ============================================================
   styles.css — Styles communs Maison Mauguio Dashboard
   Version : 1 | Date : 2026-05-25 19:30
   Auteur  : Access-IQ / Jérôme Barbaras
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0c0e14; --surface: #13161f; --surface2: #1c1f2e;
  --border: rgba(255,255,255,0.06); --text: #f0f2f8; --muted: #6b7280;
  --accent: #4f8ef7; --green: #36d399; --danger: #f87171; --warn: #f59e0b;
  --cool: #06b6d4; --heat: #ef4444; --fan: #8b5cf6; --dry: #f59e0b; --auto: #36d399;
  --font: 'Plus Jakarta Sans', sans-serif; --mono: 'JetBrains Mono', monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  display: flex;
}

/* ── Sidebar ── */
.sidebar { width: 190px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.25rem 0.75rem; height: 100vh; position: sticky; top: 0; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none; transition: all 0.15s; border: 1px solid transparent; }
.sidebar-link:hover { color: var(--text); background: var(--surface2); }
.sidebar-link.active { color: var(--text); background: var(--surface2); border-color: var(--border); }
.sidebar-icon { font-size: 16px; width: 22px; text-align: center; }

/* ── Period bar ── */
.period-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap; padding: 0.6rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.period-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.period-pills { display: flex; gap: 4px; }
.period-pill { font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); cursor: pointer; transition: all 0.15s; }
.period-pill:hover { color: var(--text); }
.period-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Cards ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; }
.card-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }

/* ── Error bar ── */
.error-bar { display: none; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--danger); margin-bottom: 1rem; }
.error-bar.show { display: block; }

/* ── Layout main ── */
.main { flex: 1; padding: 2rem 1.5rem; min-width: 0; }