/* ------------------------------------------------------------------
   Facette · famille Cabinets : « Nos clients » (cabinets.js) et
   « Assistant téléphonique » (assistant.js), 11/10/2026.
   Que des variables de styles.css ; les fonds légers sont tirés de
   --texte (color-mix), les couleurs d'état ont leur version claire :
   justes en thème sombre comme en clair, sans theme-clair.py.
   ------------------------------------------------------------------ */

#vue-cabinets,#vue-assistant{
  --cb-doux:color-mix(in srgb,var(--texte) 5%,transparent);
  --cb-orange:#FFC77D;--cb-rouge:#FF8FA6;--cb-vert:#7DF0CD;--cb-violet:#B9A3FF;
}
html[data-theme="clair"] #vue-cabinets,html[data-theme="clair"] #vue-assistant{
  --cb-orange:#9A4E00;--cb-rouge:#A81447;--cb-vert:#0F6B50;--cb-violet:#6E3AF7;
}

/* ---- en-tête, états d'attente ---- */
.cb-tete{margin-top:8px}
.cb-titre{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.01em}
.cb-tete p{color:var(--texte-doux);font-size:14.5px;margin-top:4px;max-width:90ch}
.cb-attente,.cb-vide{margin-top:22px;color:var(--texte-doux);font-size:14.5px}
.cb-vide{padding:22px;text-align:center;border:1px dashed var(--trait-fort);border-radius:14px}
.cb-note{margin-top:8px;font-size:13px;color:var(--texte-faible)}
.cb-faible{color:var(--texte-faible)}
.cb-orange{color:var(--cb-orange)}
.cb-rouge{color:var(--cb-rouge)}
.cb-nombre{font-family:var(--corps);font-weight:600;font-size:12.5px;color:var(--texte-faible);border:1px solid var(--trait-fort);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:2px}

.cb-bouton{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;
  background:var(--violet);border:1px solid var(--violet);color:#fff;cursor:pointer}
.cb-bouton:hover{filter:brightness(1.08)}
.cb-bouton-doux{background:transparent;border-color:var(--trait-fort);color:var(--texte)}
.cb-bouton-doux:hover{border-color:var(--violet);filter:none}
.cb-bouton:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.cb-relier h2{font-family:var(--display);font-weight:700;font-size:19px}
.cb-relier p,.cb-panne p{color:var(--texte-doux);font-size:14px;margin:6px 0 14px;max-width:70ch}
.cb-panne p{margin-top:0}

.cb-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--cb-doux);color:var(--texte-doux);border:1px solid var(--trait)}
.cb-badge-ok{color:var(--cb-vert);border-color:color-mix(in srgb,var(--cb-vert) 40%,transparent)}
.cb-badge-alerte{color:var(--cb-orange);border-color:color-mix(in srgb,var(--cb-orange) 40%,transparent)}
.cb-badge-rouge{color:var(--cb-rouge);border-color:color-mix(in srgb,var(--cb-rouge) 40%,transparent)}
.cb-badge-violet{color:var(--cb-violet);border-color:color-mix(in srgb,var(--cb-violet) 40%,transparent)}

/* ---- Nos clients : une carte par cabinet, toute la carte ouvre son espace ---- */
.cb-clients{display:grid;gap:14px;margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.cb-client{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);transition:border-color .15s,transform .15s}
.cb-client:hover{border-color:var(--violet);transform:translateY(-2px)}
.cb-client:focus-within{outline:2px solid var(--violet);outline-offset:2px}
.cb-client-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cb-client h3{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.3}
.cb-client-lien{color:var(--texte);text-decoration:none;outline:none}
.cb-client-lien::after{content:'';position:absolute;inset:0;border-radius:inherit}
.cb-client-qui{font-size:14px;color:var(--texte-doux)}
.cb-client-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;color:var(--texte-doux)}
.cb-etoiles{color:var(--orange);letter-spacing:1px}
.cb-etoiles span{color:var(--trait-fort)}
.cb-client-attente{font-size:13.5px;color:var(--texte-faible)}
.cb-client-attente.cb-a-voir{color:var(--cb-orange);font-weight:600}
.cb-client-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--trait)}
.cb-client-ouvrir{font-weight:700;color:var(--cb-violet)}
.cb-client-gestion{position:relative;z-index:1;padding:6px 12px;border:1px solid var(--trait-fort);border-radius:10px;font-size:13.5px;font-weight:600;color:var(--texte-doux);text-decoration:none}
.cb-client-gestion:hover{border-color:var(--violet);color:var(--texte)}

/* ---- Assistant téléphonique ---- */
.cb-kpis{margin-top:26px}
.cb-sous-titre{font-family:var(--display);font-weight:700;font-size:16px;margin-top:18px}
.cb-alertes{list-style:none;display:grid;gap:8px}
.cb-alerte{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-radius:12px;border:1px solid var(--trait);background:var(--cb-doux)}
.cb-alerte strong{display:block}
.cb-alerte p{color:var(--texte-doux);font-size:13.5px;margin-top:2px}
.cb-alerte-rouge{border-color:color-mix(in srgb,var(--cb-rouge) 45%,transparent)}
.cb-alerte-rouge strong{color:var(--cb-rouge)}
.cb-alerte-orange{border-color:color-mix(in srgb,var(--cb-orange) 45%,transparent)}
.cb-alerte-orange strong{color:var(--cb-orange)}
.cb-alerte-ok strong{color:var(--cb-vert)}

.cb-liste{list-style:none;margin-top:8px;border:1px solid var(--trait);border-radius:12px;overflow:hidden}
.cb-liste li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;font-size:14px}
.cb-liste li + li{border-top:1px solid var(--trait)}

/* la jauge du forfait : la part comprise, puis la part hors forfait, et la marque de fin du forfait */
.cb-forfait-chiffre{font-size:15px}
.cb-forfait-chiffre strong{font-family:var(--display);font-size:22px}
.cb-forfait{position:relative;display:flex;height:14px;margin-top:10px;border-radius:999px;background:var(--cb-doux);border:1px solid var(--trait)}
.cb-forfait i{display:block;height:100%}
.cb-forfait .cb-dans{background:linear-gradient(90deg,var(--violet),var(--bleu));border-radius:999px}
.cb-forfait .cb-hors{background:var(--rose);border-radius:0 999px 999px 0}
.cb-forfait i.cb-dans:not(:last-child){border-radius:999px 0 0 999px}
.cb-forfait .cb-marque{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--texte);border-radius:2px}

/* un cabinet équipé : le résumé, puis le détail en le touchant */
.cb-cab{border:1px solid var(--trait);border-radius:14px;background:var(--cb-doux)}
.cb-cab + .cb-cab{margin-top:10px}
.cb-cab[open]{border-color:var(--trait-fort)}
.cb-cab-resume{display:grid;grid-template-columns:minmax(180px,1.2fr) auto minmax(200px,1fr);align-items:center;gap:10px 16px;padding:13px 16px;cursor:pointer;list-style:none}
.cb-cab-resume::-webkit-details-marker{display:none}
.cb-cab-resume::after{content:'›';font-size:20px;color:var(--texte-faible);transition:transform .15s;justify-self:end;grid-column:-1;grid-row:1}
.cb-cab[open] .cb-cab-resume::after{transform:rotate(90deg)}
.cb-cab-nom{display:flex;flex-direction:column}
.cb-cab-nom .cb-faible{font-size:13px}
.cb-cab-etat{display:flex;flex-wrap:wrap;gap:6px}
.cb-cab-chiffres{font-size:13.5px;color:var(--texte-doux);padding-right:24px}
.cb-cab-corps{padding:4px 16px 16px;border-top:1px solid var(--trait)}
.cb-cab-corps .grille-kpi{margin-top:14px}
.cb-cab-part{margin-top:18px}
.cb-cab-part h4{font-family:var(--display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cb-cab-liens{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.cb-limites{display:grid;gap:12px;margin-top:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cb-limite p{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--texte-doux)}
.cb-jauge{height:8px;margin-top:6px;border-radius:999px;background:var(--cb-doux);border:1px solid var(--trait);overflow:hidden}
.cb-jauge i{display:block;height:100%;border-radius:999px;background:var(--cb-vert)}
.cb-jauge i.cb-niveau-orange{background:var(--cb-orange)}
.cb-jauge i.cb-niveau-rouge{background:var(--cb-rouge)}

.cb-appels{list-style:none;margin-top:8px;border:1px solid var(--trait);border-radius:12px;overflow:hidden}
.cb-appels li{display:grid;grid-template-columns:205px 1fr;gap:2px 14px;padding:9px 12px;font-size:13.5px}
.cb-appels li + li{border-top:1px solid var(--trait)}
.cb-appels li > span:nth-child(n+3){grid-column:2}
.cb-appel-quand{color:var(--texte-doux);font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.cb-plus{margin-top:8px}
.cb-plus summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--cb-violet)}
.cb-plus .cb-appels{margin-top:8px}

/* la trame et les règles, en lecture */
.cb-regle{border:1px solid var(--trait);border-radius:12px;margin-top:8px;background:var(--cb-doux)}
.cb-regle summary{padding:10px 14px;cursor:pointer;font-weight:600;font-size:14.5px}
.cb-regle summary .cb-faible{font-weight:400;font-size:12.5px;margin-left:6px}
.cb-regle ul{list-style:none;margin:0 14px 12px;display:grid;gap:6px;font-size:14px;color:var(--texte-doux)}
.cb-regle li{padding-left:12px;border-left:2px solid var(--trait-fort)}

@media (max-width:760px){
  .cb-cab-resume{grid-template-columns:1fr auto}
  .cb-cab-etat,.cb-cab-chiffres{grid-column:1 / -1}
  .cb-cab-resume::after{grid-row:1}
  .cb-cab-corps .grille-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-appels li{grid-template-columns:1fr}
  .cb-appels li > span:nth-child(n+3){grid-column:1}
  .cb-titre{font-size:23px}
}
@media (prefers-reduced-motion:reduce){.cb-client,.cb-cab-resume::after{transition:none}.cb-client:hover{transform:none}}

/* la pastille de l’onglet : ce qui attend l’équipe dans les cabinets */
.cab-pastille{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--rose);color:#fff;font-size:11px;font-weight:800;vertical-align:middle}
.cab-pastille[hidden]{display:none}

/* ---- les gestes (11/10/2026, soir) : relier, Traité, robot, trame ---- */
.cb-relier-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cb-relier-form input{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;color:var(--texte);background:var(--cb-doux);border:1px solid var(--trait-fort);border-radius:10px;padding:9px 12px}
.cb-relier-form input:focus{outline:2px solid var(--violet);outline-offset:1px}
.cb-erreur{color:var(--cb-rouge);font-size:14px;margin-top:10px}
.cb-relier .cb-erreur:first-of-type{margin:6px 0 12px}
.cb-mini{flex:none;padding:6px 12px;border-radius:9px;border:1px solid var(--trait-fort);background:transparent;color:var(--texte);font-size:13px;font-weight:600;cursor:pointer}
.cb-mini:hover{border-color:var(--violet)}
.cb-mini:disabled,.cb-bouton:disabled{opacity:.5;cursor:default}
.cb-bouton-rouge{background:transparent;border-color:color-mix(in srgb,var(--cb-rouge) 55%,transparent);color:var(--cb-rouge)}
.cb-bouton-vert{background:transparent;border-color:color-mix(in srgb,var(--cb-vert) 55%,transparent);color:var(--cb-vert)}
.cb-bouton-rouge:hover,.cb-bouton-vert:hover{filter:none;background:var(--cb-doux)}
.cb-lien{background:none;border:0;padding:0;color:var(--cb-violet);font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cb-retour{margin-top:10px;font-size:13.5px;color:var(--cb-rouge)}
.cb-retour.cb-retour-ok{color:var(--cb-vert)}
.cb-regle li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cb-regle li.cb-ajout,.cb-regle li.cb-en-edition{border-left-color:transparent;padding-left:0}
.cb-regle li.cb-en-edition{display:block}
.cb-crayon{flex:none;background:none;border:0;padding:2px 4px;cursor:pointer;opacity:.55;font-size:14px}
.cb-crayon:hover,.cb-crayon:focus-visible{opacity:1}
.cb-edition textarea{width:100%;font:inherit;font-size:16px;color:var(--texte);background:var(--carte);border:1px solid var(--trait-fort);border-radius:10px;padding:10px 12px;resize:vertical}
.cb-edition-boutons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}