body { margin: 0; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; background: var(--bg); color: var(--fg); transition: background-color 200ms ease, color 200ms ease; }
main { max-width: 920px; margin: 0 auto; padding: 20px; }
h1 { color: var(--acc); margin-top: 0; }
a { color: var(--acc); }
.kpi { display: inline-block; background: var(--card); padding: 8px 14px; border-radius: 6px; margin: 4px; border: 1px solid var(--bdr); transition: transform 0.2s ease, border-color 0.2s ease; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
/* KPIs ville : largeur uniforme sur une meme ligne (P2-5 : colonnes >= 140 px). */
#kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
#kpis .kpi { margin: 0; text-align: center; min-width: 0; }
.kpi:hover { transform: translateY(-2px); border-color: var(--acc); }
.breadcrumbs { font-size: 0.85em; color: var(--mut); margin-bottom: 16px; }
.breadcrumbs a { color: var(--mut); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.section { background: var(--card); border: 1px solid var(--bdr); border-radius: 8px; padding: 16px; margin-bottom: 16px; animation: fadeIn 0.4s ease-out both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.section:nth-of-type(1) { animation-delay: 0.05s; }
.section:nth-of-type(2) { animation-delay: 0.1s; }
.section:nth-of-type(3) { animation-delay: 0.15s; }
.section:nth-of-type(4) { animation-delay: 0.2s; }
.section:nth-of-type(5) { animation-delay: 0.25s; }
.section:nth-of-type(6) { animation-delay: 0.3s; }
table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin-top: 8px; }
th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--bdr); }
th { color: var(--mut); font-weight: 600; }
.na { color: var(--mut); }
.bad { color: var(--bad); } .warn { color: var(--warn); } .ok { color: var(--ok); }
.meteo { color: var(--mut); font-size: 0.85em; }
.skeleton-row td { padding: 8px; }
/* D13 (audit mobile 2026-09-01) : sous ~600 px les 7 colonnes tombaient en lettre-par-lettre ;
   la grille garde 600 px minimum et defile horizontalement dans .grid-wrap. */
.grid-wrap { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.grid { display: grid; grid-template-columns: 2fr 1.1fr repeat(4, 0.85fr) 1fr; gap: 0; margin-top: 0; min-width: 600px; font-size: 0.9em; border: 1px solid var(--bdr); border-radius: 6px; overflow: hidden; }
.grid .cell { padding: 6px 8px; border-bottom: 1px solid var(--bdr); border-right: 1px solid var(--bdr); min-width: 0; overflow-wrap: anywhere; }
.grid .cell:nth-child(7n) { border-right: none; }
.grid .cell.head { color: var(--mut); font-weight: 600; background: var(--card); }
.grid .cell.val { text-align: right; font-variant-numeric: tabular-nums; }
.grid .cell.loading { grid-column: 1 / -1; padding: 12px; }
.grid .cell.row-start { grid-column: 1 / -1; }
.skeleton-bar {
  display: inline-block; height: 12px; width: 80%; border-radius: 4px;
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 50%, var(--skeleton) 100%);
  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;
}
.skeleton-bar.short { width: 40%; }
.skeleton-bar.medium { width: 60%; }
footer { color: var(--mut); font-size: 0.85em; border-top: 1px solid var(--bdr); margin-top: 40px; padding: 16px 20px; }