/* ============================================================================
   sante.css — Section « Santé du site » (espace de Simon)

   Lecture en diagonale : la couleur donne l'alerte, le libellé la confirme.
   La pastille porte toujours un aria-label, la couleur ne suffit jamais.
   ========================================================================== */

.sante-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.sante-entete-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
}

.sante-entete-sous {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text2);
}

.sante-carte {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  margin-bottom: 12px;
  overflow: hidden;
}

.sante-carte-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
}

.sante-carte-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.sante-carte-resume {
  font-size: 13px;
  color: var(--text2);
}

.sante-details {
  border-top: 1px solid var(--border);
  padding: 6px 18px 12px;
}

.sante-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.sante-ligne:last-child { border-bottom: none; }

.sante-ligne-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
}

.sante-ligne-valeur {
  font-family: var(--font-mono, ui-monospace, monospace);
  text-align: right;
  word-break: break-word;
}

/* ── Pastilles d'état ──────────────────────────────────────────────────── */

.sante-pastille {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.sante-pastille--ok        { background: #16a34a; }
.sante-pastille--attention { background: #d97706; }
.sante-pastille--defaut    { background: #dc2626; }
.sante-pastille--inconnu   { background: var(--text3); }

/* Le liseré gauche reprend l'état, pour repérer une carte en défaut sans lire */
.sante--ok        { border-left-color: #16a34a; }
.sante--attention { border-left-color: #d97706; }
.sante--defaut    { border-left-color: #dc2626; }
.sante--inconnu   { border-left-color: var(--text3); }

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .sante-entete { flex-direction: column; align-items: flex-start; }

  /* Empilé plutôt que côte à côte : sur un écran étroit, une valeur longue
     (message d'erreur, nom de table) écraserait son libellé. */
  .sante-ligne { flex-direction: column; gap: 2px; }
  .sante-ligne-valeur { text-align: left; }
}