/* ─────────────────────────────────────────────────────────────────────────────
   clinical.css - Couche de finition commune aux écrans métier.
   S'utilise APRÈS shared.css. Ne redéfinit aucune couleur : elle ajuste la
   charpente des écrans (en-tête, panneaux, couples clé/valeur), pour que tous
   les rôles partagent la même structure de lecture.

   (Nom historique, conservé parce que sept pages y renvoient.)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Coquille applicative ────────────────────────────────────────────────────── */
.app-header, header.app, .topbar {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}
.app-header { position: sticky; top: 0; z-index: 50; }

.app-title { font-size: 1rem; font-weight: 900; letter-spacing: -0.01em; }
.app-subtitle { font-size: 0.76rem; color: var(--muted); font-weight: 700; }

/* Marque : pastille pleine, ronde et franche */
.brand-mark {
  width: 38px; height: 38px; border-radius: var(--radius);
  display: grid; place-items: center; flex: none;
  background: var(--primary); color: #fff; font-weight: 900; font-size: 0.95rem;
  box-shadow: 0 3px 0 var(--primary-edge);
}

/* ── Titres ──────────────────────────────────────────────────────────────────── */
h1, h2, h3 { letter-spacing: -0.015em; font-weight: 900; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

.section-label {
  font-size: 0.74rem; font-weight: 900; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding-bottom: 0.5rem; margin-bottom: 0.9rem;
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center; gap: 0.4rem;
}

/* ── Panneaux ────────────────────────────────────────────────────────────────── */
.panel, .card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
}
.panel-header {
  padding: 0.9rem 1.1rem;
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.panel-header h2, .panel-header h3 { font-size: 0.95rem; font-weight: 900; }

/* ── Couples libellé / valeur ────────────────────────────────────────────────── */
.kv { display: grid; gap: 2px; }
.kv .k {
  font-size: 0.72rem; font-weight: 900; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.kv .v { font-size: 0.95rem; color: var(--text); font-weight: 800; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem 1.25rem; }

/* ── Liseré d'état ───────────────────────────────────────────────────────────── */
/* La gravité se lit au bord gauche, en épaisseur franche. Elle est toujours
   doublée d'un libellé texte : sur un écran d'urgence, la couleur seule ne
   suffit pas - ni pour un daltonien, ni en plein soleil. */
.edge      { border-left: 6px solid var(--border); }
.edge-crit { border-left-color: var(--danger); }
.edge-warn { border-left-color: var(--warning); }
.edge-ok   { border-left-color: var(--success); }

/* ── Liens ───────────────────────────────────────────────────────────────────── */
a { color: var(--primary); text-decoration: none; font-weight: 800; }
a:hover { text-decoration: underline; }

/* ── Impression ──────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; }
  .app-header, aside, nav, .bottom-nav, .btn, .search-wrap { display: none !important; }
  .panel, .card { border: 1px solid #999; break-inside: avoid; box-shadow: none; }
}