/* Les destinataires d'un e-mail client — À, copie, copie cachée (destinataires.js, Kevin, 27 sept. 2026 ; maquette
   « Destinataires des envois »). Préfixe `dst-` : le kit a déjà une classe « chip ». */
.dst{border:1px solid var(--border);border-radius:var(--r-bloc);background:var(--surface);position:relative}
.dst-l{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px 8px 14px;border-bottom:1px solid var(--border);position:relative}
.dst-k{font-size:12.5px;font-weight:650;color:var(--ink-2);padding-top:6px;line-height:1.3}
.dst-v{display:flex;flex-wrap:wrap;gap:6px;min-width:0;min-height:30px;align-items:center}
.dst-vide{font-size:12px;color:var(--neg)}
.dst-plus{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-ctrl);color:var(--ink-2);border:1px dashed var(--border-strong);background:var(--surface);cursor:pointer}
.dst-plus:hover{border-color:var(--ink-3);color:var(--ink)}
.dst-plus[aria-expanded="true"]{border-style:solid;border-color:var(--accent);color:var(--coral-text);background:rgba(237,88,71,.07)}

/* une pastille : la personne (ou l'adresse), la croix qui la retire */
.dst-chip{display:inline-flex;align-items:center;max-width:100%;min-height:30px;border:1px solid var(--border-strong);border-radius:99px;background:var(--surface);font-size:12.5px;line-height:1.2}
.dst-chip-c{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:3px 2px 3px 4px;border:0;background:none;border-radius:99px 0 0 99px;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.dst-chip-c:hover .dst-chip-t b,.dst-chip-c[aria-expanded="true"] .dst-chip-t b{text-decoration:underline;text-underline-offset:2px}
.dst-chip-t{display:flex;align-items:baseline;gap:6px;min-width:0}
/* à l'étroit, l'adresse s'efface d'abord ; puis le nom finit par « … » au lieu d'être coupé par la pastille (une
   entreprise n'a que son adresse pour nom) */
.dst-chip-t b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.dst-chip-t small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 9999 auto}
.dst-chip-x{display:grid;place-items:center;width:24px;height:24px;margin-right:3px;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;flex:none}
.dst-chip-x:hover{background:var(--surface-2);color:var(--ink)}
.dst-chip.verrou{gap:7px;padding:3px 12px 3px 4px;border-style:dashed;background:var(--surface-2);color:var(--ink-2)}
.dst-av{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font:700 9px/1 var(--font-body,'Satoshi'),system-ui,sans-serif;letter-spacing:.02em;flex:none}
.dst-av.ent{border-radius:var(--r-ctrl)}
.dst-av.main{border-radius:var(--r-ctrl);background:var(--surface);border:1px dashed var(--border-strong)}

/* la case « Garder ces destinataires » */
.dst-garde{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;font-size:12.5px;line-height:1.45;color:var(--ink);cursor:pointer}
.dst-garde small{display:block;color:var(--ink-3);font-size:11.5px}
.dst-garde .pick{margin-top:1px}

/* ce que la fenêtre dit sous la liste : un avis, et la clé qu'est le lien de l'espace */
.dst-note{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.dst-note .ic-svg{flex:none;margin-top:1px}
.dst-cle{display:flex;align-items:flex-start;gap:9px;margin:10px 0 0;padding:10px 12px;border-radius:var(--r-ctrl);background:var(--warn-soft);color:var(--ink);font-size:12.5px;line-height:1.45}
.dst-cle .ic-svg{flex:none;margin-top:1px;color:var(--warn)}

/* les menus : ce que le dossier connaît, sous le « + » ; changer de ligne, sous une pastille */
.dst-menu{position:absolute;z-index:30;top:calc(100% - 2px);left:106px;right:10px;max-width:440px;max-height:min(420px,60vh);overflow:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pop);box-shadow:0 22px 44px -14px rgba(11,11,11,.32),0 2px 6px rgba(11,11,11,.06);padding:6px;outline:none}
.dst-menu-p{right:auto;width:210px}
.dst-mt{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 5px}
.dst-mvide{margin:0;padding:6px 10px 8px;font-size:12px;color:var(--ink-3)}
.dst-mi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:7px 9px;border:0;border-radius:var(--r-ctrl);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dst-menu-p .dst-mi{grid-template-columns:minmax(0,1fr) auto}
.dst-mi:hover,.dst-mi:focus-visible{background:var(--surface-2);outline:none}
.dst-mi[aria-disabled="true"]{cursor:default}
.dst-mi[aria-disabled="true"]:hover{background:none}
.dst-mi.pris .n,.dst-mi.pris .dst-av{opacity:.55}
.dst-mi.danger .n{color:var(--neg)}
.dst-mi-t{min-width:0}
.dst-mi .n{display:block;font-weight:650;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.dst-mi .s{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;overflow-wrap:anywhere}
.dst-mi-e{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.dst-autre .n{color:var(--coral-text)}
.dst-autre .dst-av{background:rgba(237,88,71,.08);color:var(--coral-text)}
.dst-msep{height:1px;background:var(--border);margin:5px 6px}
.dst-form{display:grid;gap:10px;padding:4px 9px 8px}
.dst-form[hidden]{display:none}
.dst-form .field{margin:0}
.dst-form .field .opt{margin-left:6px}
.dst-form-bas{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.dst-form-bas .hint{flex:1 1 200px;margin:0}

/* en lecture (la facturation récurrente, avant « Changer ») */
.dst.fixe .dst-l{grid-template-columns:92px minmax(0,1fr)}
.dst.fixe .dst-l:last-child{border-bottom:0}
.dst-chip.lecture{gap:7px;padding:3px 12px 3px 4px}
.rec-dest{display:grid;gap:8px;margin-top:16px}
.rec-dest-t{display:flex;align-items:center;gap:10px}
.rec-dest-t .dif-lab{margin:0}
.rec-dest-t .t-link{margin-left:auto;font-size:12.5px}
.rec-dest-sk{height:64px;border-radius:var(--r-bloc)}
.rec-dest .hint{margin:0}

/* l'en-tête du dossier : son interlocuteur, à côté de l'entreprise */
.dos-interl{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);font-weight:600}
.dos-interl .ic-svg{color:var(--ink-3)}

@media (max-width:700px){
  .dst.fixe .dst-l{grid-template-columns:64px minmax(0,1fr)}
  .dst-l{grid-template-columns:64px minmax(0,1fr) auto;padding-left:10px}
  .dst-menu{left:8px;right:8px;max-width:none}
  .dst-menu-p{left:8px !important;right:auto}
}