/* Oqora CRM · section Connexions (25/10/2026) : un vrai tableau, une ligne par outil (audit-visuel § 3.3).
   Jetons du § 3.1 avec repli sur les variables de crm.css d'avant (alias gardés) puis sur la valeur : la page a le
   même aspect avant et après le style commun. Règles préfixées par .s-connexions. */

.s-connexions .cx{ max-width:var(--contenu-max, 1360px); margin:0 auto; display:grid; gap:var(--sp-4, 16px); }

/* --- barre du haut : compte par état, heure de lecture --- */
.s-connexions .cx-barre{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4, 16px); flex-wrap:wrap; }
.s-connexions .cx-resume{ display:flex; flex-wrap:wrap; gap:var(--sp-2, 8px); margin:0; padding:0; list-style:none; }
.s-connexions .cx-compte{ display:inline-flex; align-items:center; gap:6px; height:var(--ctrl-h-sm, 32px); padding:0 12px;
  border:1px solid var(--rule, #dde1e5); border-radius:var(--r-md, 8px); background:var(--surface, #fff);
  font-size:13px; font-weight:500; color:var(--ink, #22262b); white-space:nowrap; }
.s-connexions .cx-lu{ font-size:13px; color:var(--ink-soft, #50575e); }
.s-connexions .cx-note{ font-size:13px; color:var(--ink-soft, #50575e); }

/* --- pastilles : la couleur n'est que sur le point, jamais sur le texte --- */
.s-connexions .cx-pastille{ display:inline-block; flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--rule-strong, #c4cad0); }
.s-connexions .cx-pastille--vert{ background:var(--vert, #15875a); }
.s-connexions .cx-pastille--orange{ background:var(--ambre-vif, var(--ambre, #a85c00)); }
.s-connexions .cx-pastille--rouge{ background:var(--rouge, #c8372c); }
.s-connexions .cx-pastille--gris{ background:var(--rule-strong, #b8bfc6); }

/* --- le tableau --- */
.s-connexions .cx-tableau{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface, #fff);
  border:1px solid var(--rule, #dde1e5); border-radius:var(--r-lg, 12px); overflow:hidden; }
.s-connexions .cx-titre{ margin:var(--sp-2, 8px) 0 calc(var(--sp-3, 12px) - var(--sp-4, 16px)); font-size:16px;
  font-weight:600; line-height:1.3; letter-spacing:0; color:var(--ink, #22262b); }
.s-connexions .cx-tableau th{ height:36px; padding:0 var(--sp-4, 16px); text-align:left; white-space:nowrap;
  font-size:12px; font-weight:500; line-height:1; letter-spacing:0; color:var(--ink-soft, #50575e);
  background:var(--surface-2, var(--bande, #f2f4f6)); border-bottom:1px solid var(--rule, #dde1e5); }
.s-connexions .cx-tableau td{ padding:10px var(--sp-4, 16px); min-height:48px; vertical-align:middle;
  border-bottom:1px solid var(--rule-soft, #eceef1); font-size:14px; line-height:1.45; color:var(--ink, #22262b); }
.s-connexions .cx-tableau tbody tr:last-child td{ border-bottom:0; }
.s-connexions .cx-tableau tbody tr:hover td{ background:var(--hover, var(--bande, #f4f6f8)); }
.s-connexions .cx-outil{ width:30%; }
.s-connexions .cx-nom{ display:block; font-weight:500; }
.s-connexions .cx-role{ display:block; font-size:13px; color:var(--ink-soft, #50575e); }
.s-connexions .cx-etat{ white-space:nowrap; }
.s-connexions .cx-etat .cx-pastille{ margin-right:8px; vertical-align:middle; }
.s-connexions .cx-etat-texte{ vertical-align:middle; }
.s-connexions .cx-mode{ white-space:nowrap; }
.s-connexions .cx-badge{ display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:var(--r-sm, 6px);
  font-size:12px; font-weight:500; line-height:1; background:var(--surface-2, var(--bande, #f2f4f6));
  color:var(--ink-soft, #50575e); white-space:nowrap; }
.s-connexions .cx-quand{ white-space:nowrap; color:var(--ink-soft, #50575e); font-size:13px; }
.s-connexions .cx-phrase{ font-size:13px; }

/* --- téléphone et tablette : une carte par outil, sans défilement horizontal --- */
@media (max-width:899px){
  .s-connexions .cx-tableau, .s-connexions .cx-tableau tbody, .s-connexions .cx-tableau tr,
  .s-connexions .cx-tableau td{ display:block; width:auto; }
  .s-connexions .cx-tableau thead{ display:none; }
  .s-connexions .cx-tableau{ border-radius:var(--r-lg, 12px); }
  .s-connexions .cx-tableau tr{ padding:var(--sp-3, 12px) var(--sp-4, 16px); border-bottom:1px solid var(--rule-soft, #eceef1); }
  .s-connexions .cx-tableau tbody tr:last-child{ border-bottom:0; }
  .s-connexions .cx-tableau td{ padding:2px 0; min-height:0; border-bottom:0; }
  .s-connexions .cx-tableau tbody tr:hover td{ background:none; }
  .s-connexions .cx-tableau td.cx-etat, .s-connexions .cx-tableau td.cx-mode,
  .s-connexions .cx-tableau td.cx-quand{ display:inline-flex; align-items:center; margin:4px var(--sp-3, 12px) 2px 0; }
  .s-connexions .cx-tableau td.cx-outil{ padding-bottom:0; }
  .s-connexions .cx-phrase:empty{ display:none; }
}