/* L'écran de chaque complément installé (CDC_COMPLEMENTS_ECRANS, 2026-10-18 ; 57b-cmp-ecrans.js). Le proprio : « pour chaque
   complément installé, un bouton dans le panneau de gauche et une UI adaptée ». Un en-tête commun (icône teintée, nom,
   version, actif ou en pause, Réglages), le corps propre au complément en blocs à filet, des listes compactes, une pastille
   d'état (vert, orange, rouge). Jetons seulement : les trois états du thème viennent d'eux. */
@layer modules{
  .cmpe{display:flex;flex-direction:column;gap:var(--sp-14);min-width:0}
  .cmpe-tete{display:flex;align-items:center;gap:var(--sp-10);padding-bottom:var(--sp-12);border-bottom:1px solid var(--line)}
  .cmpe-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:var(--radius);color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,var(--card))}
  .cmpe-ic svg{width:18px;height:18px}
  .cmpe-id{display:flex;align-items:baseline;gap:var(--sp-8);flex:1;min-width:0}
  .cmpe-nom{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmpe-ver{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--mut)}
  .cmpe-etat{display:inline-flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--mut)}   /* l'interrupteur de la liste (.cmp-toggle), le même partout */
  .cmpe-tete .mini{display:inline-flex;align-items:center;gap:var(--sp-6)}
  .cmpe-tete .mini svg.ic{width:14px;height:14px}
  .cmpe-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
  .cmpe-actions .mini{display:inline-flex;align-items:center;gap:var(--sp-6)}
  .cmpe-actions .mini svg.ic{width:14px;height:14px}
  .cmpe-bloc{display:flex;flex-direction:column;gap:var(--sp-6)}
  .cmpe-bloc:empty{display:none}
  .cmpe-h{margin:var(--sp-4) 0 0;font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt)}
  .cmpe-ligne{display:flex;align-items:baseline;gap:var(--sp-10);font-size:var(--fs-sm)}
  .cmpe-etiq{flex:none;min-width:120px;color:var(--mut)}
  .cmpe-val{min-width:0;overflow-wrap:anywhere}
  .cmpe-val.ok{color:var(--ok);font-weight:var(--fw-label)} .cmpe-val.err{color:var(--err);font-weight:var(--fw-label)}
  /* Les cartes posées sur le fond de la page n'ont plus de bordure (le proprio, 2026-10-20, après Figma : « idem pour les autres compléments avec ce type de cards ») ; celles posées DANS une carte gardent la leur. */
  .cmpe-liste{display:flex;flex-direction:column;border:0;border-radius:var(--radius);background:var(--card);overflow:hidden}
  .cmpe-item{display:flex;align-items:center;gap:var(--sp-10);min-width:0;padding:var(--sp-8) var(--sp-12);font-size:var(--fs-sm)}
  .cmpe-item+.cmpe-item{border-top:1px solid var(--line2)}
  .cmpe-item code{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmpe-droite{margin-left:auto;color:var(--mut);font-size:var(--fs-xs);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .cmpe-item button.cmpe-droite{color:inherit;font-size:inherit}
  .cmpe-point{flex:none;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--mut2)}
  .cmpe-point.ok{background:var(--ok)} .cmpe-point.warn{background:var(--warn)} .cmpe-point.err{background:var(--err)}
  .cmpe-alerte{padding:var(--sp-8) var(--sp-12);border-radius:var(--radius);font-size:var(--fs-sm);color:var(--txt);background:color-mix(in srgb,var(--warn) 14%,var(--card))}
  .cmpe-alerte.ok{background:color-mix(in srgb,var(--ok) 14%,var(--card))}
  .cmpe-note{font-size:var(--fs-xs);color:var(--mut)}
  .cmpe-vide{padding:var(--sp-10) 0;font-size:var(--fs-sm);color:var(--mut)}
  .cmpe-journal{display:flex;flex-direction:column;gap:var(--sp-6);padding-top:var(--sp-12);border-top:1px solid var(--line)}
  .cmp-bientot{flex:none;padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);font-size:var(--fs-xs);color:var(--mut);background:var(--line2)}
  /* Les compléments par API (CDC_COMPLEMENTS_API A2, 57c-cmp-api.js) : Connexion, une rangée par action, le résultat en
     tableau ou en fiche. Mêmes filets et mêmes surfaces que les écrans des autres compléments. */
  .cmpa-intro{margin:0;font-size:var(--fs-sm);color:var(--mut);max-width:72ch}
  .cmpa-cnx{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12);border:0;border-radius:var(--radius);background:var(--card)}
  .cmpa-cnx-tete{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap}
  .cmpa-cnx-tete .cmpe-h{margin:0}
  .cmpa-cnx-etat{display:inline-flex;align-items:center;gap:var(--sp-6);margin-left:auto;font-size:var(--fs-sm);color:var(--mut);min-width:0}
  .cmpa-cnx-etat code{font-family:var(--font-mono);font-size:var(--fs-xs)}
  .cmpa-form,.cmpa-args{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-8) var(--sp-10)}
  .cmpa-champ{display:flex;flex-direction:column;gap:var(--sp-4);flex:1 1 220px;min-width:0;font-size:var(--fs-xs);color:var(--mut)}
  .cmpa-champ.cmpa-court{flex:0 1 120px}
  .cmpa-champ input{width:100%;min-width:0;height:32px;padding:0 var(--sp-8);border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--bg);color:var(--txt);font:inherit;font-size:var(--fs-sm)}
  .cmpa-champ input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .cmpa-coche{display:inline-flex;align-items:center;gap:var(--sp-6);height:32px;font-size:var(--fs-sm);color:var(--txt)}
  .cmpa-gestes{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
  .cmpa-actions{display:flex;flex-direction:column;border:0;border-radius:var(--radius);background:var(--card);overflow:hidden}
  .cmpa-action{display:flex;flex-direction:column;gap:var(--sp-6);padding:var(--sp-10) var(--sp-12);min-width:0}
  .cmpa-action+.cmpa-action{border-top:1px solid var(--line2)}
  .cmpa-action-tete{display:flex;align-items:center;gap:var(--sp-8)}
  .cmpa-action-t{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt);min-width:0}
  .cmpa-action-tete .mini{margin-left:auto;flex:none}
  .cmpa-ecrit{flex:none;padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);font-size:var(--fs-2xs);color:var(--txt);background:color-mix(in srgb,var(--warn) 18%,var(--card))}
  .cmpa-res:empty{display:none}
  .cmpa-res{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
  .cmpa-table-cadre{overflow-x:auto;border:1px solid var(--line2);border-radius:var(--radius-sm)}
  .cmpa-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
  .cmpa-table th{position:sticky;top:0;text-align:left;font-weight:var(--fw-label);color:var(--mut);background:var(--card2);white-space:nowrap}
  .cmpa-table th,.cmpa-table td{padding:var(--sp-4) var(--sp-8);border-bottom:1px solid var(--line2);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmpa-table tr:last-child td{border-bottom:0}
  .cmpa-json{margin:0;max-height:320px;overflow:auto;padding:var(--sp-8);border-radius:var(--radius-sm);background:var(--card2);
    font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--txt);white-space:pre-wrap;overflow-wrap:anywhere}
  /* CDC_LIVE_COMPLEMENTS (2026-10-21) : les repères en tête, les archives documentées, les sondes groupées, le filtre. */
  .cmpe-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-10)}
  .cmpe-kpi{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-10) var(--sp-12);border-radius:var(--radius);background:var(--card);min-width:0}
  .cmpe-kpi-e{font-size:var(--fs-2xs);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.04em;color:var(--mut2)}
  .cmpe-kpi-v{font-size:var(--fs-base);font-weight:var(--fw-strong);display:flex;align-items:center;gap:var(--sp-6);min-width:0;overflow-wrap:anywhere}
  .cmpe-kpi-s{font-size:var(--fs-xs);color:var(--mut);min-width:0;overflow-wrap:anywhere}
  .cmpe-kpi-s code{font-family:var(--font-mono);font-size:var(--fs-2xs)}
  .cmpe-kpi.ok .cmpe-kpi-v{color:var(--ok)} .cmpe-kpi.err .cmpe-kpi-v{color:var(--err)} .cmpe-kpi.warn .cmpe-kpi-v{color:var(--warn)}
  .cmpe-garder{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);color:var(--mut);margin-left:auto}
  .cmpe-inline{margin-left:var(--sp-6)}
  .cmpe-arch{gap:var(--sp-8)}
  .cmpe-arch-date{flex:none;min-width:150px;font-variant-numeric:tabular-nums}
  .cmpe-arch-contenu{color:var(--mut);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmpe-badge{flex:none;font-size:var(--fs-2xs);font-weight:var(--fw-strong);padding:0 var(--sp-6);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .cmpe-badge.production{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
  .cmpe-badge.staging{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
  .cmpe-arch-acts{flex:none;display:inline-flex;gap:var(--sp-2);opacity:0;transition:opacity .12s}
  .cmpe-arch:hover .cmpe-arch-acts,.cmpe-arch:focus-within .cmpe-arch-acts{opacity:1}
  .cmpe-arch-acts .mini{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0}
  .cmpe-arch-acts .mini svg.ic{width:13px;height:13px}
  .cmpe-seg{display:inline-flex;background:var(--card2);border-radius:var(--radius);padding:var(--sp-2);gap:var(--sp-2)}
  .cmpe-seg button{border:0;background:transparent;color:var(--mut);font-size:var(--fs-xs);font-weight:var(--fw-label);padding:var(--sp-4) var(--sp-8);border-radius:var(--radius-sm);cursor:pointer}
  .cmpe-seg button.on{background:var(--card);color:var(--txt);box-shadow:var(--shadow-sm)}
  .cmpe-groupe{border-radius:var(--radius);background:var(--card);overflow:hidden}
  .cmpe-groupe+.cmpe-groupe{margin-top:var(--sp-6)}
  .cmpe-groupe summary{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer;list-style:none}
  .cmpe-groupe summary::-webkit-details-marker{display:none}
  .cmpe-compte{margin-left:auto;font-size:var(--fs-2xs);color:var(--mut);background:var(--card2);border-radius:var(--radius-pill);padding:0 var(--sp-6)}
  .cmpe-groupe .cmpe-liste{border-radius:0;border-top:1px solid var(--line2)}
  .cmpe-passage{width:100%;text-align:left;border:0;background:transparent;color:var(--txt);cursor:pointer;font:inherit}
  .cmpe-passage:hover{background:var(--line2)}
  .cmpe-passage b.err{color:var(--err)} .cmpe-passage b.warn{color:var(--warn)} .cmpe-passage b.ok{color:var(--ok)}
}