/* Les deux dashboards (modération et administrateur, voir js/maison.js). Chargé après themes.css : n'utilise que les
   variables des thèmes (--grad, --lueur, --verre, --bien…), donc juste dans les 6 thèmes, clair compris. Complète les
   classes .db-* (cartes, jauges, courbes) de hms.css. */
.ms { display: grid; gap: 26px; min-width: 0; }
.ms-zone { min-width: 0; }

/* ─── le héros : l'état de toute la maison ─── */
.ms-heros { --ton: var(--bien); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px; align-items: center;
  padding: 24px 26px; border-radius: calc(var(--rayon) + 6px); isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--lueur), .2), transparent 55%), var(--verre);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 70px -36px rgba(var(--lueur), .65); animation: entree .55s cubic-bezier(.2, .7, .2, 1) both; }
.ms-heros.attention { --ton: var(--attention); }
.ms-heros.mal { --ton: var(--mal); }
/* liseré en dégradé du thème autour du héros */
.ms-heros::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); z-index: -1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .75; }
.ms-heros::after { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -160px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(var(--lueur), .28), transparent 65%); animation: ms-respire 7s ease-in-out infinite; }
@keyframes ms-respire { 50% { transform: scale(1.15) translate(-20px, 14px); opacity: .7; } }

.ms-anneau { --p: 100; position: relative; width: 148px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ton) calc(var(--p) * 1%), rgba(var(--lueur), .12) 0); box-shadow: 0 0 36px -6px var(--ton); }
.ms-anneau::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--verre-fort); }
.ms-anneau > div { position: relative; display: grid; text-align: center; line-height: 1.05; padding: 0 14px; }
.ms-anneau b { font: 800 2.6rem var(--titre); color: var(--ton); font-variant-numeric: tabular-nums; }
.ms-anneau small { font-size: .74rem; color: var(--doux); font-weight: 600; }

.ms-heros-texte { min-width: 0; }
.ms-heros-texte h2 { font-family: var(--titre); font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin: 4px 0 8px; line-height: 1.15; }
.ms-heros-texte p { margin: 0; }
.ms-direct { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.ms-direct i { width: 8px; height: 8px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 0 var(--bien); animation: ms-pouls 2s infinite; }
@keyframes ms-pouls { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.ms-alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .9rem; }
.ms-alertes li { display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.ms-alertes li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pale); transform: translateY(-1px); }
.ms-alertes li.mal::before { background: var(--mal); box-shadow: 0 0 8px var(--mal); }
.ms-alertes li.attention::before { background: var(--attention); box-shadow: 0 0 8px var(--attention); }

.ms-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.ms-chiffres > * { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--rayon-petit); border: 1px solid var(--trait); background: rgba(var(--lueur), .06);
  color: inherit; text-decoration: none; transition: transform .25s, border-color .25s, background .25s; }
.ms-chiffres > a:hover { transform: translateY(-2px); border-color: rgba(var(--lueur), .5); background: rgba(var(--lueur), .12); }
.ms-chiffres > .accent { border-color: rgba(var(--lueur), .6); background: var(--grad-doux); }
.ms-chiffres b { font: 800 1.55rem var(--titre); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ms-chiffres b small { font-size: .9rem; color: var(--doux); font-weight: 600; }
.ms-chiffres b.bien { color: var(--bien); } .ms-chiffres b.attention { color: var(--attention); } .ms-chiffres b.mal { color: var(--mal); }
.ms-chiffres span { font-size: .78rem; color: var(--doux); line-height: 1.3; }

/* ─── sections ─── */
.ms-section { display: grid; gap: 14px; min-width: 0; }
.ms-section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; }
.ms-section-tete h2 { font-family: var(--titre); font-size: 1.2rem; margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ms-section-tete h2::before { content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--grad); align-self: center; }
.ms-section-tete h2 small { font-family: inherit; font-weight: 600; font-size: .8rem; }
.ms-section-tete p { margin: 0; font-size: .86rem; max-width: 72ch; }
.ms-info { margin: 0; padding: 12px 16px; border-radius: var(--rayon-petit); border: 1px dashed rgba(var(--lueur), .45); background: rgba(var(--lueur), .07); font-size: .88rem; }

/* ─── cartes des machines ─── */
/* en colonnes (façon « maçonnerie ») : des cartes de hauteurs très différentes ne laissent pas de trous */
.ms .db-grille { display: block; columns: 330px; column-gap: 16px; }
.ms .db-grille > .db-carte { break-inside: avoid; margin-bottom: 16px; width: 100%; }
.ms-machine.figee .db-jauges, .ms-machine.figee .db-detail, .ms-machine.figee .ms-temps, .ms-machine.figee .db-ligne { opacity: .62; filter: grayscale(.7); }
.ms-machine.eteint { opacity: .72; }
.ms-machine.eteint:hover { opacity: 1; }
.ms-fige { margin: 0; padding: 10px 12px; border-radius: var(--rayon-petit); font-size: .82rem; line-height: 1.4;
  border: 1px solid rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .1); color: var(--encre); }
.ms-jauge-detail { font-size: .68rem; color: var(--pale); text-align: center; font-variant-numeric: tabular-nums; }
.ms-temps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ms-temp { font-size: .74rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--trait); color: var(--doux); white-space: nowrap; }
.ms-temp b { color: var(--encre); font-variant-numeric: tabular-nums; }
.ms-temp.attention { border-color: rgba(251, 191, 36, .5); } .ms-temp.attention b { color: var(--attention); }
.ms-temp.mal { border-color: rgba(251, 113, 133, .6); } .ms-temp.mal b { color: var(--mal); }
.ms-mini { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--or); flex: none; }
.ms-mini svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ms-raid { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: .8rem; overflow-wrap: anywhere; }
.ms-raid b.bien { color: var(--bien); } .ms-raid b.mal { color: var(--mal); }
.db-barre i.info { background: var(--info); }

/* ─── services ─── */
.ms-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.ms-service { color: inherit; text-decoration: none; align-content: start; }
.ms-service .db-nom h3, .ms-service .db-nom p { white-space: normal; overflow: visible; }
.ms-service .db-tete { align-items: flex-start; }
a.ms-service:focus-visible { outline: 2px solid rgba(var(--lueur), .9); outline-offset: 2px; }
.ms-dl { margin: 0; display: grid; gap: 6px; }
.ms-dl div { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; border-top: 1px solid var(--trait); padding-top: 6px; }
.ms-dl dt { color: var(--doux); flex: none; }
.ms-dl dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ms-dl dd .doux { font-weight: 400; }
.ms-dl dd b.mal { color: var(--mal); }

/* ─── conteneurs ─── */
.ms-outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ms-recherche { flex: 0 1 260px; min-width: 0; }
.ms-conteneurs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
.ms-conteneur { display: grid; grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 11px 14px; border-radius: var(--rayon-petit); border: 1px solid var(--trait); background: var(--verre);
  transition: border-color .25s, transform .25s, background .25s; animation: entree .4s cubic-bezier(.2, .7, .2, 1) both; }
.ms-conteneur:hover { border-color: rgba(var(--lueur), .45); background: rgba(var(--lueur), .06); }
.ms-conteneur.malade, .ms-conteneur.arrete, .ms-conteneur.redemarre { border-color: rgba(251, 113, 133, .45); }
.ms-etat i { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--pale); }
.ms-etat.ok i { background: var(--bien); box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
.ms-etat.malade i, .ms-etat.redemarre i { background: var(--attention); box-shadow: 0 0 10px rgba(251, 191, 36, .8); animation: ms-clignote 1.4s ease-in-out infinite; }
.ms-etat.arrete i { background: var(--mal); box-shadow: 0 0 10px rgba(251, 113, 133, .7); }
@keyframes ms-clignote { 50% { opacity: .35; } }
.ms-c-nom { display: grid; min-width: 0; }
.ms-c-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-c-nom small { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-cadenas { font-size: .75rem; }
.ms-c-mesure { display: grid; gap: 3px; min-width: 0; font-size: .8rem; }
.ms-c-mesure small { font-size: .7rem; }
.ms-c-mesure b { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-redemarrer { white-space: nowrap; min-width: 128px; transition: background .2s, color .2s, box-shadow .2s; }
.ms-redemarrer.confirmer { background: var(--attention); color: #1b1300; border-color: transparent; box-shadow: 0 0 0 4px rgba(251, 191, 36, .25); animation: ms-clignote 1s ease-in-out infinite; }
.ms-redemarrer.en-cours { opacity: .8; cursor: progress; }
.ms-redemarrer[disabled]:not(.en-cours) { opacity: .45; cursor: not-allowed; }
.ms-vide { margin: 0; padding: 16px; text-align: center; border: 1px dashed var(--trait); border-radius: var(--rayon-petit); }

/* ─── appareils du réseau ─── */
.ms-appareils { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.ms-appareil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: var(--rayon-petit);
  border: 1px solid var(--trait); background: var(--verre); transition: border-color .25s, opacity .25s; }
.ms-appareil:hover { border-color: rgba(var(--lueur), .45); }
.ms-appareil.absent { opacity: .55; }
.ms-appareil .puce { grid-column: 2; justify-self: start; }
.ms-app-ico { grid-row: span 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad-doux); border: 1px solid var(--trait); color: var(--or); }
.ms-app-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ms-app-nom { display: grid; min-width: 0; }
.ms-app-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-app-nom small { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-app-tech { color: var(--pale); font-variant-numeric: tabular-nums; }

/* ─── historiques ─── */
.ms-graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ms-graphe { display: grid; gap: 8px; padding: 16px; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--verre); min-width: 0; }
.ms-graphe h3 { margin: 0; font-size: .95rem; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ms-graphe h3 small { font-weight: 500; font-size: .74rem; }
.ms-graphe-zone { position: relative; padding-bottom: 20px; }
.ms-graphe svg { width: 100%; height: 150px; display: block; overflow: visible; }
.ms-grille line { stroke: var(--trait); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.ms-trait { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(var(--lueur), .35)); }
.ms-trait.c0 { stroke: var(--braise); } .ms-trait.c1 { stroke: var(--or); } .ms-trait.c2 { stroke: var(--info); }
.ms-trait.c3 { stroke: var(--bien); } .ms-trait.c4 { stroke: var(--attention); } .ms-trait.c5 { stroke: var(--mal); }
.ms-axe { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; font-size: .68rem; color: var(--pale); }
.ms-axe span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ms-axe span:first-child { transform: none; } .ms-axe span:last-child { transform: translateX(-100%); }
.ms-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--doux); }
.ms-legende li { display: inline-flex; align-items: center; gap: 6px; }
.ms-legende i { width: 12px; height: 3px; border-radius: 2px; }
.ms-legende i.c0 { background: var(--braise); } .ms-legende i.c1 { background: var(--or); } .ms-legende i.c2 { background: var(--info); }
.ms-legende i.c3 { background: var(--bien); } .ms-legende i.c4 { background: var(--attention); } .ms-legende i.c5 { background: var(--mal); }
.ms-dispos { display: grid; gap: 8px; padding: 16px; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--verre); }
.ms-dispos h3 { margin: 0 0 4px; font-size: .95rem; }
.ms-dispo { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: .84rem; }
.ms-dispo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-dispo b { text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ms-heros::after, .ms-direct i, .ms-etat i, .ms-redemarrer.confirmer { animation: none; }
}
@media (max-width: 1100px) {
  .ms-heros { grid-template-columns: auto minmax(0, 1fr); }
  .ms-chiffres { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ms-heros { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; gap: 18px; }
  .ms-heros-texte { justify-self: stretch; }
  .ms-alertes { text-align: left; }
  .ms-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; text-align: left; }
  .ms-anneau { width: 128px; }
  .ms-graphes { grid-template-columns: minmax(0, 1fr); }
  .ms-conteneur { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; }
  .ms-conteneur .ms-c-mesure { grid-column: 2 / 4; grid-row: auto; }
  .ms-conteneur .ms-c-mesure + .ms-c-mesure { grid-row: auto; }
  .ms-redemarrer { grid-column: 3; grid-row: 1; min-width: 0; padding-inline: 12px; }
  .ms-recherche { flex: 1 1 100%; }
  .ms-dispo { grid-template-columns: minmax(0, 1fr) 70px; }
  .ms-dispo .db-barre { grid-column: 1 / -1; grid-row: 2; }
}