/* CRM REP — Pièces jointes et courriels reçus (pieces.js, vague 3). */
.pj-ajout { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.pj-ajout select { width: auto; min-width: 150px; }
.pj-ajout small { flex: 1; min-width: 160px; }
.pj-choisir { cursor: pointer; }
.pj-liste { display: flex; flex-direction: column; }
.pj-l { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pj-l:last-child { border-bottom: 0; }
.pj-l.masque { opacity: .6; }
.pj-ic { flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  font: 700 11px/1 system-ui, sans-serif; cursor: pointer; }
.pj-ic:hover { border-color: var(--red); color: var(--red-2); }
.pj-info { flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.pj-info a { color: var(--text); }
.pj-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pj-cat { width: auto; padding: 4px 8px; font-size: 13px; }
.pj-vue { display: grid; place-items: center; background: #000; border-radius: 8px; overflow: hidden; }
.pj-vue img { max-width: 100%; max-height: 72vh; object-fit: contain; }
.pj-vue iframe { width: 100%; height: 72vh; border: 0; background: #fff; }
.pj-titre { overflow-wrap: anywhere; }
.pj-courriel { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 13px; }
.pj-courriel a { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); overflow-wrap: anywhere; }
@media (max-width: 640px) { .pj-act { width: 100%; } }