/* ── 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. */

/* Dans l'onglet Environnements d'un dossier (2026-10-25) : la section sous les cartes d'environnement, la carte sans tête. */
.inst-dossier-sec{margin-top:var(--sp-24)}
.inst-dossier-sec .env-list-hd{margin-bottom:var(--sp-10)}
.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}

/* ── E2 (2026-10-10) : la carte d'une création porte TOUS ses environnements ────
   Local (le poste) est gris et inerte ; un environnement posé garde la ligne-bouton
   qui ouvre sa fiche ; un environnement vide dit « à renseigner » ou propose le seul
   geste qui pose quelque chose ici : l'espace d'essai (Espaces, D-E1). */
.ins-row-env{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-14);border-top:1px solid var(--line2);
  font-size:var(--fs-sm);color:var(--mut);min-width:0}
.ins-row-env:first-of-type{border-top:0}
.ins-row-env .ins-domain{color:var(--mut);font-weight:var(--fw-medium)}
.ins-row-env .ins-env-vide{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-row-env .mini{flex:none}
.ins-row-env select.ins-loc{flex:none;max-width:160px;font-size:var(--fs-xs)}
.ins-card-acts{display:flex;flex-wrap:wrap;gap:var(--sp-6);padding:var(--sp-8) var(--sp-14);border-top:1px solid var(--line2);background:var(--card)}
.ins-card-acts .mini svg.ic{width:13px;height:13px}

/* ── E3 (2026-10-10) : « Mon domaine » sur la fiche ────────────────────────────
   La ligne de saisie, l'enregistrement à créer (nom · A · ip) et le verdict : vert
   seulement quand le nom résout vers le nœud, parce que c'est la condition du certificat. */
.ins-dom{margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--line2)}
.ins-dom-t{font-size:var(--fs-xs);font-weight:var(--fw-strong);letter-spacing:.04em;text-transform:uppercase;color:var(--mut2);margin-bottom:var(--sp-6)}
.ins-dom-t .lbl-hint{text-transform:none;letter-spacing:0;font-weight:var(--fw-regular)}
.ins-dom-row{display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap}
.ins-dom-row input{flex:1;min-width:160px}
.ins-dom-recs-t{font-size:var(--fs-2xs);color:var(--mut2);margin:var(--sp-8) 0 var(--sp-4);text-transform:uppercase;letter-spacing:.04em}
.ins-dom-recs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.ins-dom-recs li{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--txt)}
.ins-dom-verdict{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-8);font-size:var(--fs-xs);color:var(--warn)}
.ins-dom-verdict.ins-dom-conforme{color:var(--ok)}
.ins-dom-verdict svg.ic{width:14px;height:14px;flex:none}

/* ── L'installation vue d'un dossier et d'un environnement (2026-10-25) : une ligne par installation (le domaine, le lieu avec
   son drapeau et son hébergeur, les KPI), cliquable ; un cadre, des séparateurs. ── */
.ins-dossier{border:.5px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.ins-dr{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-6);width:100%;padding:var(--sp-12) var(--sp-14);text-align:start;
  border:0;background:transparent;color:var(--txt);font:inherit;cursor:pointer;border-radius:0;box-shadow:none;transition:none}
button.ins-dr:hover{background:var(--card2)}
button.ins-dr:focus-visible{outline:none;box-shadow:inset var(--focus)}
.ins-dr+.ins-dr,.ins-dossier>.ins-autres,.ins-dossier>.ins-card-acts{border-top:.5px solid var(--line2)}
.ins-dr-defaut,.ins-dr-sq{cursor:default}
.ins-dr-tete{display:flex;align-items:center;gap:var(--sp-8);min-width:0}
.ins-dr-dom{font-size:var(--fs-md);font-weight:var(--fw-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-dr-tete .ins-row-go{margin-inline-start:auto;color:var(--mut2)}
.ins-dr-d{font-size:var(--fs-xs);color:var(--mut2)}
.ins-lieu{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);color:var(--mut)}
.ins-drapeau{font-size:var(--fs-md);line-height:1}
.ins-heb{color:var(--mut2)}
.ins-kpis{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-18);margin-top:var(--sp-2)}
.ins-kpi{display:flex;flex-direction:column;gap:var(--sp-2);min-width:70px}
.ins-kpi-k{font-size:var(--fs-2xs);color:var(--mut2);text-transform:uppercase;letter-spacing:.05em}
.ins-kpi-v{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--txt);font-variant-numeric:tabular-nums}
.ins-etat{display:inline-flex;align-items:center;gap:var(--sp-4)}
.ins-dossier>.ins-autres .ins-row-env{padding:var(--sp-8) var(--sp-14)}
.ins-dossier>.ins-card-acts{padding:var(--sp-8) var(--sp-14)}
.inst-env-sec{margin:var(--sp-14) 0}
.inst-env-sec .inst-env{margin-top:var(--sp-8);border:.5px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.ins-env-note{margin:0;padding:var(--sp-12) var(--sp-14)}