/* =====================================================================
   VISION PME — Ce qui tourne tout seul

   Un tableau de bord de surveillance, pas un rapport. La question à
   laquelle il répond en trois secondes est « est-ce que ça tourne
   encore ? » — d'où le bandeau en tête, qui doit pouvoir devenir rouge.
   ===================================================================== */

/* ⚠️ Même piège qu'ailleurs : `#page-content` est une grille CSS, et un
   enfant de grille a `min-width: auto`. Sans ceci, un tableau large
   pousse la page entière au lieu de défiler dans sa boîte. */
#au-zone { min-width: 0; }

/* ── Le bandeau de santé ─────────────────────────────────────────────── */
.au-sante {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-md, 10px);
  background: var(--surface-1);
}
.au-sante .grow { min-width: 0; }
.au-sante b { font-weight: 700; }
.au-sante .icon { width: 22px; height: 22px; flex: none; }
.au-sante.est-ok { border-left-color: var(--green, #00CE86); }
.au-sante.est-ok .icon { color: var(--green, #00CE86); }
.au-sante.est-souci { border-left-color: var(--warn); background: var(--warn-soft, var(--surface-1)); }
.au-sante.est-souci .icon { color: var(--warn); }

/* ── Titres de section ───────────────────────────────────────────────── */
.au-titre {
  display: flex; align-items: center; gap: 8px;
  margin: var(--s-6) 0 var(--s-1);
  font: 700 var(--fs-md)/1.3 var(--font-body);
}
.au-titre .icon { width: 17px; height: 17px; color: var(--text-subtle); }
.au-sous { margin: 0 0 var(--s-3); font-size: var(--fs-xs); max-width: 62ch; }

/* ── Tableaux ────────────────────────────────────────────────────────── */
/* ⚠️ Le tableau défile DANS sa boîte, pas la page. Cinq colonnes tiennent
   mal sous 700 px, et une page qui glisse horizontalement donne
   l'impression d'être cassée. */
.au-table {
  display: block; overflow-x: auto;
  width: 100%; border-collapse: collapse;
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
}
.au-table thead th {
  text-align: left; font-weight: 600; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--fs-2xs);
  padding: 0 var(--s-3) 6px; white-space: nowrap;
}
.au-table td {
  padding: 10px var(--s-3);
  border-top: 1px solid var(--border);
  vertical-align: top;
}
.au-table code {
  font-size: 0.92em; padding: 1px 5px;
  background: var(--surface-2); border-radius: 4px;
}
.au-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-table thead .au-n { text-align: right; }

/* Une horloge arrêtée reste lisible — on veut savoir laquelle — mais elle
   cesse de se présenter comme un rouage en marche. */
.au-table tr.est-arrete td { opacity: .55; }
.au-table tr.est-souci td { background: var(--warn-soft, transparent); }
.au-echec { color: var(--warn); font-weight: 600; }

.au-note { color: var(--text-muted); max-width: 46ch; }

/* ── Puces et modes ──────────────────────────────────────────────────── */
.au-chiffres { display: flex; flex-wrap: wrap; gap: 6px; }
.au-puce {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-1);
  font: 500 var(--fs-2xs)/1.6 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.au-puce b { font-weight: 750; color: var(--text); }
.au-puce.est-gris { opacity: .6; }
.au-puce.est-cher { border-color: var(--warn); color: var(--warn); }
.au-puce.est-cher b { color: var(--warn); }

.au-mode {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font: 600 var(--fs-2xs)/1.6 var(--font-body); white-space: nowrap;
}
.au-mode.est-auto { background: var(--ok-soft); color: var(--green-text); }
.au-mode.est-suggestion { background: var(--surface-2); color: var(--text-muted); }
.au-mode.est-courriel { background: var(--info-soft, var(--surface-2)); color: var(--text-muted); }
.au-mode.est-texto { background: var(--surface-2); color: var(--text-muted); }

/* ── Séquences ───────────────────────────────────────────────────────── */
.au-seq { margin-bottom: var(--s-5); }
.au-seq > header {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.au-seq > header h3 { margin: 0; font: 700 var(--fs-sm)/1.3 var(--font-body); }

/* ── La barre d'ordre de grandeur ────────────────────────────────────── */
/* Elle vit DERRIÈRE le nombre, pas à côté : la colonne reste alignée sur
   les chiffres, et la barre ne vole pas de largeur. */
.au-origines td.au-n { position: relative; }
.au-barre {
  position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%);
  height: 60%; width: var(--w, 0);
  max-width: 100%;
  background: var(--ok-soft); border-radius: 3px;
  z-index: 0; pointer-events: none;
}
.au-origines td.au-n { z-index: 1; }

@media (max-width: 720px) {
  .au-sante { flex-wrap: wrap; }
  .au-note { max-width: none; }
}

/* ── La clé technique sous le libellé lisible ─────────────────────────
   « accueil-trois-portes » ne dit rien à personne ; l'objet du courriel,
   si. Mais la clé reste utile quand on cherche dans le code ou dans la
   base — elle passe donc en dessous, en petit, sans disparaître. */
.au-cle {
  margin-top: 3px;
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
}
.au-cle code { background: none; padding: 0; }

/* La phrase qui dit ce qui allume un déclencheur, et sa condition. */
.au-quand b { font-weight: 650; }
.au-condition {
  margin-top: 4px;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  /* Une condition SQL est parfois longue : elle se replie plutôt que
     d'élargir la colonne. */
  max-width: 30ch; overflow-wrap: anywhere;
}
.au-tech { color: var(--text-subtle); }
.au-tech code { background: none; padding: 0; font-size: var(--fs-2xs); }