/* ── Installations (CDC_INSTALLATIONS.md L1) : la fiche d'hébergement par création ──
   DA console Hdplio : la couleur est un ÉTAT, pas une décoration. Une pastille
   verte ne se remarque pas ; une rouge saute aux yeux parce qu'elle est rare.
   Rayons courts, en-tête plat, densité serrée - même grammaire que .inf-* et .etag. */

.ins-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);
  margin-bottom:var(--sp-10);overflow:hidden}
.ins-card:last-of-type{margin-bottom:0}

.ins-head{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-14);
  border-bottom:1px solid var(--line2);background:var(--card)}
.ins-proj-dot{width:7px;height:7px;border-radius:var(--radius-xs);flex:none;background:var(--k,var(--mut))}
.ins-proj{font-weight:var(--fw-bold);font-size:var(--fs-md);letter-spacing:-.01em;color:var(--txt);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-count{font-size:var(--fs-2xs);color:var(--mut2);font-weight:var(--fw-strong);flex:none}

.ins-row{padding:var(--sp-10) var(--sp-14);border-top:1px solid var(--line2)}
.ins-row:first-of-type{border-top:0}
.ins-row-head{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-8)}

/* ── Ligne simplifiée (liste) : état + identité, rien de plus - le détail vit
   dans la fiche ouverte au clic (instOpenFiche). Un <button> pleine largeur,
   remis à plat pour se lire comme la ligne qu'elle remplace. */
.ins-row-simple{display:flex;align-items:center;gap:var(--sp-8);width:100%;
  border:0;border-top:1px solid var(--line2);background:transparent;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background var(--dur-1)}
.ins-row-simple:first-of-type{border-top:0}
.ins-row-simple:hover,.ins-row-simple:focus-visible{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ins-row-go{flex:none;color:var(--mut2);display:flex}
.ins-row-go svg.ic{width:14px;height:14px}

/* État : présent / absent / injoignable / suspendu / en cours de vérification. */
.ins-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--mut2)}
.ins-dot.ins-ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.ins-dot.ins-drift{background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 22%,transparent)}
.ins-dot.ins-susp{background:var(--warn)}
.ins-dot.ins-unknown{background:var(--mut2)}
.ins-dot.ins-wait{background:var(--line);animation:ins-pulse 1.1s ease-in-out infinite}
@keyframes ins-pulse{0%,100%{opacity:.35}50%{opacity:.9}}

.ins-domain{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt);text-decoration:none;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono)}
.ins-domain:hover{color:var(--accent);text-decoration:underline}

/* Les facettes : emplacement, site, conso, coût - lisibles en une ligne d'œil. */
.ins-facets{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:var(--sp-1);
  background:var(--line2);border:1px solid var(--line2);border-radius:var(--radius-sm);overflow:hidden}
.ins-facet{background:var(--card);padding:var(--sp-6) var(--sp-8);min-width:0}
.ins-f-k{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-strong);letter-spacing:.04em;
  text-transform:uppercase;color:var(--mut2)}
.ins-f-v{display:block;font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt);margin-top:var(--sp-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-f-v.mono{font-family:var(--font-mono);font-size:var(--fs-xs)}

/* ── Mesure en cours ────────────────────────────────────────────────────────
   La barre occupe la place EXACTE de la valeur à venir (même hauteur de ligne)
   pour que rien ne saute quand la mesure arrive. Elle reprend `pulse`, la seule
   recette de battement de l'application — pas une variante de plus — et se tait
   quand le système demande moins d'animation. Neutre : une attente n'est pas un
   état à signaler, elle n'emprunte donc pas l'accent. */
.ins-f-wait{display:flex;align-items:center;height:calc(var(--fs-sm) * var(--lh-normal))}
.ins-f-wait > i{display:block;width:72%;height:var(--sp-6);border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--mut2) 30%,transparent)}
@media (prefers-reduced-motion:no-preference){ .ins-f-wait > i{animation:pulse 1.4s ease-in-out infinite} }

/* Dérive : le site est déclaré mais introuvable sur son nœud. */
.ins-row .ins-drift{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-8);
  font-size:var(--fs-xs);color:var(--err)}
.ins-row .ins-drift svg.ic{width:14px;height:14px;flex:none}

.ins-alert{display:flex;gap:var(--sp-8);align-items:flex-start;margin-bottom:var(--sp-10);
  padding:var(--sp-10) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  font-size:var(--fs-xs);line-height:1.55;color:var(--mut)}
.ins-alert svg.ic{width:15px;height:15px;color:var(--accent);flex:none;margin-top:var(--sp-1)}
.ins-alert b{color:var(--txt);font-weight:var(--fw-strong)}
.ins-alert .mono{font-family:var(--font-mono);color:var(--txt)}
.ins-alert-down{background:color-mix(in srgb,var(--err) 7%,transparent);
  border-color:color-mix(in srgb,var(--err) 26%,transparent)}
.ins-alert-down svg.ic{color:var(--err)}

/* ── L9 : la barre de gestes d'une installation (et d'un nœud) ───────────────
   Posée SOUS les facettes et non dans l'en-tête : la ligne du haut sert à
   identifier (domaine, environnement, verdict) ; agir vient après avoir lu.
   Un filet la sépare, sinon les boutons se lisent comme une facette de plus. */
.ins-acts{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-10);
  padding-top:var(--sp-8);border-top:1px solid var(--line2)}
.ins-acts .mini{flex:none}
.ins-acts .mini svg.ic{width:13px;height:13px}