.app { display:grid; grid-template-rows:var(--header-h) 1fr; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; }

/* HEADER */
.header { grid-column:1/-1; background:var(--wood-dark); display:flex; align-items:center; padding:0 16px; gap:12px; border-bottom:1px solid rgba(255,255,255,0.08); z-index:100; }
.header-logo { display:flex; align-items:center; gap:8px; }
.header-logo-icon { width:30px; height:30px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.header-logo-text { color:#fff; font-size:13px; font-weight:700; }
.header-site { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:5px 10px; color:rgba(255,255,255,0.9); font-size:11px; font-weight:500; display:flex; align-items:center; gap:5px; }
.header-site-dot { width:6px; height:6px; border-radius:50%; background:#2D7A4F; }
.header-spacer { flex:1; }
.header-user { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:4px 10px 4px 5px; }
.header-avatar { width:26px; height:26px; background:var(--accent); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.header-username { color:rgba(255,255,255,0.9); font-size:12px; font-weight:600; }
.header-role { color:rgba(255,255,255,0.5); font-size:11px; }
.header-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:rgba(255,255,255,0.8); font-size:11px; font-weight:600; padding:6px 12px; cursor:pointer; font-family:inherit; transition:background 0.15s; }
.header-btn:hover { background:rgba(255,255,255,0.15); }

/* SIDEBAR */
.sidebar { background:var(--wood-dark); border-right:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; overflow-y:auto; padding:10px 0; }
.sidebar-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.38); padding:8px 16px 4px; }
.sidebar-divider { height:1px; background:rgba(255,255,255,0.10); margin:8px 12px; }
.nav-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; color:rgba(255,255,255,0.72); transition:all 0.15s; margin:1px 6px; position:relative; white-space:nowrap; }
.nav-item:hover { background:rgba(255,255,255,0.08); color:#fff; }
.nav-item.active { background:var(--accent); color:#fff; font-weight:600; }
.nav-item.active::before { content:''; position:absolute; left:-6px; top:6px; bottom:6px; width:3px; background:#fff; border-radius:0 6px 6px 0; }
.nav-icon { font-size:15px; width:18px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:1px 6px; border-radius:12px; min-width:18px; text-align:center; }
.nav-badge.green { background:var(--green); }
.nav-badge.red { background:var(--red); }

/* MAIN */
.main { overflow-y:auto; display:flex; flex-direction:column; background:var(--wood-bg); }
.page-header { padding:18px 22px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-shrink:0; }
.page-title { font-size:22px; font-weight:700; color:var(--wood-dark); letter-spacing:-0.02em; }
.page-subtitle { font-size:12px; color:var(--text-muted); margin-top:2px; }
.page-actions { display:flex; gap:8px; align-items:center; }
.page-content { padding:14px 22px 22px; flex:1; }

/* CARDS */
.card { background:var(--white); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.card-header { padding:12px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.card-title { font-size:12px; font-weight:700; color:var(--text); }
.card-body { padding:0; }

/* KPIs */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.kpi-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.kpi-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:6px; }
.kpi-value { font-size:22px; font-weight:700; color:var(--wood-dark); line-height:1; font-family:'DM Mono',monospace; }
.kpi-sub { font-size:11px; color:var(--text-muted); margin-top:4px; }
.kpi-trend { font-size:11px; font-weight:700; padding:1px 5px; border-radius:6px; }
.trend-up { background:var(--green-soft); color:var(--green); }
.trend-down { background:#FBEAE8; color:var(--red); }

/* ── Nouveautés & correctifs (bouton « i » + panneau) ── */
.header-info-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin: 0 4px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--accent);
  cursor: pointer;
  font-size: 18px;
  transition: background .15s, border-color .15s;
}
.header-info-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.changelog-dot {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px;
  background: #E2574C;
  border: 2px solid var(--white);
  border-radius: 50%;
}
.changelog-panel {
  position: fixed;
  top: 64px; right: 14px;
  width: 370px; max-width: calc(100vw - 28px);
  max-height: 72vh; overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(23,62,84,.18);
  z-index: 2000;
  display: none;
}
.changelog-panel.open { display: block; }
.changelog-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--wood-dark); color: #fff;
  border-radius: 14px 14px 0 0;
  font-size: 15px;
}
.changelog-close {
  background: transparent; border: 0; color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.changelog-list { padding: 6px 0; }
.changelog-vide { padding: 22px 16px; color: var(--text-muted); text-align: center; }
.changelog-item { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.changelog-item:last-child { border-bottom: 0; }
.changelog-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.changelog-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 10px;
}
.changelog-nouveaute { background: #DCEFE3; color: #2D7A4F; }
.changelog-correctif { background: #FBEEDC; color: #B5701B; }
.changelog-date { font-size: 11.5px; color: var(--text-muted); }
.changelog-titre { font-weight: 600; color: var(--wood-dark); margin-bottom: 2px; }
.changelog-detail { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* ─── Menu repliable (accordéon) — cosmétique, n'affecte aucun droit ─── */
.nav-group-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; transition:color 0.15s; }
.nav-group-header:hover { color:rgba(255,255,255,0.60); }
.nav-group-chevron { font-size:14px; color:rgba(255,255,255,0.45); transition:transform 0.18s ease; margin-left:8px; }
.nav-group-header:hover .nav-group-chevron { color:rgba(255,255,255,0.65); }
.nav-group-header[data-replie="1"] .nav-group-chevron { transform:rotate(-90deg); }