/* Portail client : reprend la mise en page du bureau (rail, onglets du bas, panneaux) et ajoute l'état du parc en une phrase. */
.who{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border-radius:8px;color:var(--on-surface-variant);font-size:.8125em;font-weight:500;white-space:nowrap;}
.who .ms{font-size:18px}
.row .cells .tag{min-width:0}
.hello{margin:0;padding:0 24px 8px;color:var(--on-surface-variant);font-size:.9375em}

/* L'état du parc en une phrase : alarme, en cours ou calme */
.state{margin:0 24px 16px;border-radius:24px;padding:20px 24px;display:flex;gap:16px;align-items:flex-start}
.state>.ms{font-size:32px;flex:none}
.state div{display:grid;gap:8px;justify-items:start}
.state .hi{margin:0;font-family:var(--f-brand);font-weight:800;font-stretch:112%;font-size:1.5em;line-height:1.15}
.state p{margin:0;line-height:1.5}
.s-alarm{background:var(--error-container);color:var(--on-error-container)}
.s-busy{background:var(--warn-container);color:var(--on-warn-container)}
.s-calm{background:var(--nuit);color:var(--givre)}
.s-calm .ms{color:var(--signal)}
.s-calm p{color:var(--brume)}
.s-calm .hi{color:var(--givre)}

/* Chiffres clés */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 24px 8px;max-width:1180px}
.tile{background:var(--surface-low);border-radius:16px;padding:14px 16px;display:grid;gap:2px}
.tile b{font-size:1.5em;font-weight:600;font-variant-numeric:tabular-nums}
.tile span{font-size:.8125em;color:var(--on-surface-variant);line-height:1.35}
.tile.warn b{color:#B07F00}

/* Suivi : cartes avec barre d'étapes, comme un colis */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:0 24px 8px;max-width:1180px}
.track{display:flex;gap:4px;margin:4px 0 2px}
.track i{flex:1;height:6px;border-radius:3px;background:var(--surface-highest)}
.track i.on{background:var(--primary)}
.cta{padding:0 24px 8px}
.cta .filled{width:auto;padding:0 24px;display:inline-flex;align-items:center;gap:8px}
.pfoot .hint .ms{font-size:16px;vertical-align:-3px}

/* Statistiques : pannes par mois et tableau par appareil */
.chart{max-width:1180px}
.bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;align-items:end;height:180px;margin:0 24px 32px;border-bottom:1px solid var(--outline-variant)}
.bar{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;outline:none}
.bar i{display:block;width:min(28px,70%);background:var(--primary);border-radius:4px 4px 0 0}
.bar .v{font-size:.75em;font-weight:600;opacity:0;margin-bottom:4px;font-variant-numeric:tabular-nums}
.bar:hover .v,.bar:focus .v,.bar.peak .v{opacity:1}
.bar:focus-visible i{outline:2px solid var(--on-surface);outline-offset:2px}
.bar .m{position:absolute;bottom:-22px;font-size:.6875em;color:var(--on-surface-variant)}
.tablewrap{padding:0 24px 8px;overflow-x:auto;max-width:1180px}
table.stat{width:100%;border-collapse:collapse;font-size:.9375em}
table.stat th{text-align:left;font-size:.8125em;font-weight:600;color:var(--on-surface-variant);padding:8px;border-bottom:1px solid var(--outline-variant)}
table.stat td{padding:8px;border-bottom:1px solid var(--outline-variant);font-variant-numeric:tabular-nums;vertical-align:middle}
table.stat td small{display:block;color:var(--on-surface-variant);font-size:.8125em}
table.stat .textbtn{padding:0;height:auto;min-height:32px;text-align:left}

@media (max-width:820px){
  .bars{margin:0 16px 32px}
  .tablewrap{padding:0 16px 8px}
  table.stat th:nth-child(4),table.stat td:nth-child(4),table.stat th:nth-child(5),table.stat td:nth-child(5){display:none}
  .hello{padding:0 16px 8px}
  .state{margin:0 16px 12px;padding:18px 20px}
  .state .hi{font-size:1.25em}
  .kpis{grid-template-columns:1fr 1fr;padding:0 16px 8px;gap:8px}
  .cgrid{grid-template-columns:1fr;padding:0 16px 8px}
  .cta{padding:0 16px 8px}
  .cta .filled{width:100%;justify-content:center}
}
.bmain .list{max-width:1180px}