/* Chantier n° 11 (31/10) — Clients façon SpiderVO : la liste (bureau : les colonnes de la V1 + ce qui est en
   cours ; téléphone : une ligne par client, le geste bleu) et la fiche client (bandeau, un mot une couleur, ses
   dossiers, précédent / suivant). Un mot, une couleur ; le détail au survol. Préfixe « cl- ». Chargé après
   clients-echanges.css. */
.cl-mot{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:hsl(var(--ap-gris-doux));color:hsl(var(--ap-doux))}
.cl-mot[data-ton="bleu"]{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort))}
.cl-mot[data-ton="orange"]{background:hsl(var(--ap-ambre-doux));color:hsl(var(--ap-ambre))}
.cl-mot[data-ton="vert"]{background:hsl(var(--ap-vert-doux));color:hsl(var(--ap-vert))}
.cl-mot[data-ton="rouge"]{background:hsl(var(--ap-rouge-doux));color:hsl(var(--ap-rouge))}
.cl-mot.cl-rien{background:none;padding:0;color:hsl(var(--ap-doux));font-weight:500}
.cl-type{font-size:13px;font-weight:600;color:hsl(var(--ap-doux))}
.cl-type[data-type="professionnel"]{color:hsl(var(--ap-action-fort))}
.cl-doux{color:hsl(var(--ap-doux))}
.cl-attente,.cl-vide{margin:0;padding:24px 0;text-align:center;color:hsl(var(--ap-doux));font-weight:600}

/* Filtres en une rangée. */
.cl-fbtn{display:none}
.cl-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cl-seg{display:inline-flex;flex-wrap:wrap;gap:4px}
.cl-seg button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:999px;background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font:inherit;font-size:13px;font-weight:600;color:hsl(var(--ap-doux));cursor:pointer}
.cl-seg button .num{font-weight:500;opacity:.8}
.cl-seg button.on{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort));box-shadow:0 0 0 1px hsl(var(--ap-action)) inset}
.cl-tri-tel{display:none}

/* Bureau : le tableau de la V1, la barre de couleur = ce qui est en cours. */
.cl-t th button.cl-tri{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.cl-t th button.cl-tri:focus-visible{outline:2px solid hsl(var(--ap-action)/.4)}
.cl-fleche{font-size:9px}
.cl-t td{max-width:220px}
.cl-t tr.cl-l td:first-child{box-shadow:4px 0 0 hsl(var(--ap-trait)) inset;padding-left:16px}
.cl-t tr.cl-l[data-ton="bleu"] td:first-child{box-shadow:4px 0 0 hsl(var(--ap-action)) inset}
.cl-t tr.cl-l[data-ton="orange"] td:first-child{box-shadow:4px 0 0 hsl(var(--ap-ambre)) inset}
.cl-t tr.cl-l[data-ton="vert"] td:first-child{box-shadow:4px 0 0 hsl(var(--ap-vert)) inset}
.cl-t .cl-personne b{font-weight:600}
.cl-t td.cl-tel{display:none}

/* La fiche. */
.cl-ft{gap:8px 12px}
.cl-voisines{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;color:hsl(var(--ap-doux))}
.cl-voisines .ce-b{min-width:36px;justify-content:center}
.cl-voisines+.ce-gestes{margin-left:0}
.cl-bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font-size:14px}
.cl-contact{font-weight:600}
.cl-coord{min-width:0;overflow-wrap:anywhere}
.cl-gestes{display:inline-flex;flex-wrap:wrap;gap:8px}
.cl-bandeau>.cl-doux{margin-left:auto}
.cl-sommaire{display:flex;flex-wrap:wrap;gap:6px}
.cl-puce{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font-size:13px;font-weight:600;color:hsl(var(--ap-encre));text-decoration:none}
.cl-puce .num{color:hsl(var(--ap-action-fort))}
.cl-puce.cl-zero{color:hsl(var(--ap-doux));box-shadow:none;background:hsl(var(--ap-gris-doux))}
.cl-puce.cl-zero .num{color:hsl(var(--ap-doux))}
.cl-notes h2{display:flex;align-items:center;gap:8px}
.cl-ajout{margin-left:auto}
.cl-note-saisie{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.cl-note-saisie textarea{flex:1 1 100%;min-height:56px;padding:8px;resize:vertical}
.cl-rappel{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:hsl(var(--ap-doux))}
.cl-rappel input{flex:none;width:auto}
.cl-note{display:grid;grid-template-columns:84px minmax(0,1fr) auto auto;gap:4px 12px;align-items:center;padding:6px 0;border-top:1px solid hsl(var(--ap-trait))}
.cl-note[data-note="fiche"]{grid-template-columns:84px minmax(0,1fr)}
.cl-note.cl-fait .ce-note{color:hsl(var(--ap-doux))!important;text-decoration:line-through}
.cl-note .ce-lib b{white-space:pre-wrap;font-weight:500}

/* ── Téléphone : une ligne par client ─────────────────────────────────────────────── */
@media (max-width:767px){
  .cl .ce-tete h1{font-size:18px}
  .cl .ce-n{font-size:15px}
  .cl .ce-cherche{order:3;flex-basis:100%;max-width:none;height:44px;font-size:16px}
  .cl-fbtn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:44px;padding:0 14px;border-radius:999px;border:0;font:inherit;font-size:15px;font-weight:600;background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;color:hsl(var(--ap-encre))}
  .cl-filtres:not(.cl-ouvert){display:none}
  .cl-filtres{display:grid;gap:8px}
  .cl-seg button{min-height:44px;height:auto;font-size:15px}
  .cl-tri-tel{display:inline-flex}
  .cl .ce-gestes{margin:0}
  .cl .v2-mini,.cl .ce-b{min-height:44px;height:auto;font-size:15px}
  table.cl-t,table.cl-t tbody{display:block;width:100%;background:none;border:0;box-shadow:none;overflow:visible}
  table.cl-t thead{display:none}
  table.cl-t tr.cl-l{display:block;margin:0 0 8px}
  table.cl-t tr.cl-l>td.cl-c{display:none}
  table.cl-t tr.cl-l>td.cl-tel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 10px;align-items:center;max-width:none;height:auto;min-height:72px;padding:10px 10px 10px 16px;border:0;border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;white-space:normal;overflow:hidden;box-sizing:border-box}
  table.cl-t tr.cl-l>td.cl-tel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:hsl(var(--ap-trait))}
  table.cl-t tr.cl-l[data-ton="bleu"]>td.cl-tel::before{background:hsl(var(--ap-action))}
  table.cl-t tr.cl-l[data-ton="orange"]>td.cl-tel::before{background:hsl(var(--ap-ambre))}
  table.cl-t tr.cl-l[data-ton="vert"]>td.cl-tel::before{background:hsl(var(--ap-vert))}
  .cl-lt{display:grid;min-width:0;gap:1px}
  .cl-lt b,table.cl-t td.cl-tel .cl-lt b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cl-lt small{font-size:15px;color:hsl(var(--ap-doux));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cl-mot{font-size:15px}
  .cl-geste{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:var(--ap-r-s);background:hsl(var(--ap-action));color:#fff;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
  .cl .ce-pages{gap:12px;font-size:15px}
  .cl .ce-pages .ce-b{min-width:44px;justify-content:center}
  /* La fiche. */
  .cl-fiche .ce-tete h1{flex:1 1 100%;order:2}
  .cl-voisines{font-size:15px}
  .cl-voisines .ce-b{min-width:44px}
  .cl-bandeau{flex-direction:column;align-items:stretch;font-size:15px;padding:12px}
  .cl-bandeau>.cl-doux{margin-left:0}
  .cl-gestes .ce-b{flex:1;justify-content:center}
  .cl-puce{min-height:44px;font-size:15px}
  .cl-type{font-size:15px}
  .cl .ce-bloc{padding:12px}
  .cl .ce-bloc h2{font-size:17px}
  .cl .ce-date,.cl .ce-tag,.cl .ce-lib small,.cl .ce-montant,.cl .ce-msg,.cl-rappel{font-size:15px}
  .cl .ce-lib b{font-size:16px;white-space:normal}
  .cl-note,.cl-note[data-note="fiche"]{grid-template-columns:minmax(0,1fr) auto}
  .cl-note .ce-lib{grid-column:1/-1}
  .cl-note-saisie textarea,.cl-note-saisie input{font-size:16px;min-height:44px}
}