/* ch.710 — Boîte noire › Connexions (tuiles des comptes, utilisation, lignes-cartes) ⊕ avatars de la barre du haut. Charte claire (R119) : actif #34D399 / texte #0F172A ;
   rouge = échec seulement ; grilles par CLASSE (R120) ; ⛔ aucune variable CSS ; zones ≥ 44 px ; 4 ⇒ 2 ⇒ 1 colonne. Modèle visuel : tuiles du ch.708 (relief, cadre, dégradé). */
.cx710 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cx710-haut { position: sticky; top: -24px; z-index: 6; background: #F8FAFC; padding: 6px 0 8px; margin-top: -6px; }
.cx710-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cx710-tuile { position: relative; text-align: left; border: 1px solid #E2E8F0; border-top: 5px solid #34D399; border-radius: 16px; padding: 14px 14px 12px; cursor: pointer; min-width: 0; font-family: inherit;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10), 0 2px 4px rgba(15, 23, 42, .06), inset 0 1px 0 #FFFFFF; transition: transform .12s, box-shadow .12s; color: #0F172A; }
.cx710-tuile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .14), 0 3px 6px rgba(15, 23, 42, .08), inset 0 1px 0 #FFFFFF; }
.cx710-tuile:focus-visible { outline: 3px solid #34D399; outline-offset: 2px; }
.cx710-chev { position: absolute; top: 10px; right: 12px; font-size: 12px; color: #64748B; transition: transform .15s; }
.cx710-tuile.ouverte .cx710-chev { transform: rotate(180deg); }
.cx710-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx710-av { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #0F172A; font-weight: 800; font-size: 15px;
  object-fit: cover; border: 3px solid #FFFFFF; box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }
.cx710-av { position: relative; overflow: hidden; } .cx710-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx710-haut:has(.cx710-tuile.ouverte) { position: static; margin-top: 0; }   /* une tuile dépliée ne reste pas collée : elle couvrirait l'écran */
.cx710-av.petit { width: 30px; height: 30px; font-size: 11px; border-width: 2px; }
.cx710-qui { min-width: 0; } .cx710-nom { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; } .cx710-sous { font-size: 11.5px; color: #64748B; overflow-wrap: anywhere; }
.cx710-etat { margin-top: 10px; font-size: 13px; font-weight: 700; color: #475569; } .cx710-etat span { display: block; font-size: 11.5px; font-weight: 500; color: #64748B; }
.cx710-etat.on { color: #047857; }
.cx710-app { margin-top: 4px; font-size: 12px; color: #334155; overflow-wrap: anywhere; }
.cx710-detail { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #CBD5E1; cursor: default; }
.cx710-d h4 { margin: 10px 0 4px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #64748B; } .cx710-d h4:first-child { margin-top: 0; }
.cx710-mini { font-size: 12px; color: #334155; padding: 3px 0; overflow-wrap: anywhere; } .cx710-mini.rouge { color: #B91C1C; } .cx710-mini.ambre { color: #92400E; } .cx710-mini.gris { color: #64748B; }
.cx710-conf { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cx710-conf.revoque, .cx710-conf.expire { color: #94A3B8; }
.cx710-conf button, .cx710-tous { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #FCA5A5; background: #FFFFFF; color: #B91C1C; font-weight: 700; font-size: 12px; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.cx710-tous { margin-top: 6px; }
.cx710-enreg { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #34D399; background: #34D399; color: #0F172A; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; }
.cx710-pastille { font-size: 10.5px; font-weight: 700; color: #64748B; background: #F1F5F9; border-radius: 999px; padding: 1px 8px; text-transform: none; letter-spacing: 0; }
.cx710-note { font-size: 11px; color: #64748B; margin-top: 6px; }
.cx710-erreur { background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 12px; padding: 24px; color: #334155; font-size: 14px; }
/* utilisation */
.cx710-usage { background: linear-gradient(180deg, #FFFFFF, #F8FAFC); border: 1px solid #E2E8F0; border-radius: 16px; padding: 16px; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); min-width: 0; }
.cx710-usage-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .cx710-usage-tete h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0F172A; }
.cx710-bascule { display: inline-flex; border: 1px solid #E2E8F0; border-radius: 10px; overflow: hidden; }
.cx710-bascule button { min-height: 40px; padding: 0 14px; border: none; background: #FFFFFF; color: #334155; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.cx710-bascule button.on { background: #34D399; color: #0F172A; }
.cx710-graphe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 170px; margin-top: 14px; padding: 0 2px; }
.cx710-graphe.trente { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.cx710-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.cx710-pile { display: flex; flex-direction: column-reverse; border-radius: 8px 8px 3px 3px; overflow: hidden; min-height: 2px; background: #F1F5F9; }
.cx710-pile span { display: block; min-height: 2px; }
.cx710-jour { font-size: 10.5px; color: #64748B; text-align: center; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx710-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-top: 12px; }
.cx710-leg { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; color: #334155; min-width: 0; } .cx710-leg .pt { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.cx710-leg span:last-child { color: #64748B; font-size: 12px; }
/* filtres ⊕ listes en lignes-cartes (comme la Banque) */
.cx710-filtres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cx710-filtres select { min-height: 44px; border: 1px solid #E2E8F0; border-radius: 10px; padding: 6px 10px; font-size: 13px; background: #FFFFFF; min-width: 0; width: 100%; font-family: inherit; }
.cx710-case { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; } .cx710-case input { width: 20px; height: 20px; accent-color: #34D399; }
.cx710-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cx710-liste { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; min-width: 0; } .cx710-liste h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #0F172A; }
.cx710-cadre { max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.cx710-l { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid #E2E8F0; border-left: 4px solid #34D399; border-radius: 10px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), inset 0 1px 0 #FFFFFF; min-width: 0; }
.cx710-l.vert { border-left-color: #34D399; } .cx710-l.ambre { border-left-color: #F59E0B; } .cx710-l.rouge { border-left-color: #EF4444; } .cx710-l.gris { border-left-color: #CBD5E1; }
.cx710-ic { font-size: 18px; line-height: 1.2; flex-shrink: 0; } .cx710-l-corps { min-width: 0; flex: 1; }
.cx710-l-haut { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #0F172A; flex-wrap: wrap; } .cx710-l-haut span { font-size: 12px; color: #64748B; }
.cx710-l-bas { font-size: 12px; color: #475569; margin-top: 2px; overflow-wrap: anywhere; } .cx710-l.rouge .cx710-l-bas { color: #B91C1C; }
.cx710-vide { padding: 18px; text-align: center; font-size: 13px; color: #64748B; }
.cx710-pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 8px; font-size: 12.5px; color: #64748B; }
.cx710-pager button { min-height: 40px; min-width: 40px; border: 1px solid #E2E8F0; border-radius: 8px; background: #FFFFFF; cursor: pointer; font-family: inherit; }
/* barre du haut : avatars des comptes (lot 3) */
.cx710-barre { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.cx710-barre .cx710-b { position: relative; width: 36px; height: 36px; border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.cx710-barre .cx710-b .cx710-av { width: 32px; height: 32px; font-size: 11.5px; border-width: 2px; margin: 2px; }
.cx710-barre .cx710-pt { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #FFFFFF; background: #CBD5E1; }
.cx710-barre .cx710-pt.on { background: #10B981; }
.cx710-barre .cx710-compte { display: none; font-size: 11px; font-weight: 700; color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cx710-bulle { position: fixed; z-index: 9500; background: #FFFFFF; color: #0F172A; border: 1px solid #E2E8F0; border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: 0 10px 24px rgba(15, 23, 42, .16); max-width: 260px; pointer-events: none; }
.cx710-bulle b { display: block; font-size: 13px; }
@media (max-width: 1100px) { .cx710-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx710-haut { position: static; margin-top: 0; } }
@media (max-width: 1024px) { .cx710-deux { grid-template-columns: minmax(0, 1fr); }
  /* l'en-tête du CRM est replié (ch.256) : les avatars FLOTTENT en haut à droite, comme le menu en haut à gauche (même gouttière de 56 px réservée) */
  .cx710-barre { position: fixed; top: 8px; right: 8px; z-index: 990; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 999px; padding: 3px 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); margin: 0; } }
@media (max-width: 760px) {
  .cx710-tuiles { grid-template-columns: minmax(0, 1fr); } .cx710-legende { grid-template-columns: minmax(0, 1fr); }
  .cx710-filtres { grid-template-columns: minmax(0, 1fr); } .cx710-graphe { height: 130px; gap: 6px; } .cx710-graphe.trente { gap: 2px; } .cx710-graphe.trente .cx710-jour { font-size: 8px; }
  .cx710-barre .cx710-b { width: 28px; height: 28px; } .cx710-barre .cx710-b .cx710-av { width: 24px; height: 24px; font-size: 9px; margin: 2px; }
  .cx710-barre .cx710-b + .cx710-b { margin-left: -10px; } .cx710-barre .cx710-pt { width: 9px; height: 9px; } .cx710-barre .cx710-compte { display: inline-block; }
}