/* Composants communs (style ui.com / UniFi) — chargé après les styles propres à chaque page */
body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; }
h1 { font-weight: 700; }

/* petits libellés : discrets, sans majuscules forcées */
.eyebrow, .k, .mods-label, .data th, .qr figcaption {
  font: 500 13px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted);
}
.tag, .card .tag { font: 600 12px/1.2 var(--f-body); letter-spacing: 0; color: var(--accent); }
.state-label { font: 500 12.5px/1 var(--f-body); text-transform: none; letter-spacing: 0; }

/* en-tête : barre blanche fixe */
header.top { background: var(--surface); position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow); }
.brand { font: 600 17px/1 var(--f-body); letter-spacing: -.01em; }

/* boutons */
.btn { border-radius: var(--radius); font: 500 14px/1 var(--f-body); box-shadow: var(--shadow); }
.btn.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.copy, .copy.modpack, .card button.ask {
  font: 500 12.5px/1 var(--f-body); text-transform: none; letter-spacing: 0; border-radius: 6px;
}
.ver { font: 500 12px/1 var(--f-body); border-radius: 6px; }

/* cartes */
.unit, .card, .skill, .contact, .table-scroll, .form-box {
  border-radius: var(--radius-lg); box-shadow: var(--shadow); border-color: var(--line);
}
.card { transition: box-shadow .15s ease, transform .15s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
}
.rack { border-radius: var(--radius-lg); }
.specs { font: 500 13px/1.2 var(--f-body); font-variant-numeric: tabular-nums; }

/* pastilles et filtres */
.chip { font: 500 13px/1 var(--f-body); }
.chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.chips li { font: 500 12.5px/1 var(--f-body); background: var(--sunken); border-color: transparent; }

/* champs de formulaire */
input:not([type=checkbox]):not([type=radio]), select, textarea, .search { border-radius: var(--radius); font-family: var(--f-body); }

/* tableau de bord : tuiles de chiffres, panneaux, pastilles d'état, jauges (communs aux deux sites) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 8px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.kpi-label { font: 500 13px/1.3 var(--f-body); color: var(--muted); }
.kpi-value { font: 600 1.9rem/1.1 var(--f-body); letter-spacing: -.02em; color: var(--fg); }
.kpi-value small { font-size: .55em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kpi-hero .kpi-value { font-size: 3rem; }
.kpi-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; display: inline-block; }
.dot[data-state="starting"] { background: var(--warn); }
.dot[data-state="offline"], .dot[data-state="stopping"], .dot[data-state="inconnu"] { background: var(--off); }
.meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); overflow: hidden; }
.meter > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width .4s ease; }
.meter[data-level="warn"] > span { background: var(--warn); }
.meter[data-level="crit"] > span { background: var(--err); }
@media (prefers-reduced-motion: reduce) { .meter > span { transition: none; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 1.15rem; }