/* Le complément Email (CDC_EMAIL E3, 2026-10-28 ; 57e-cmp-email.js). Trois volets dans l'onglet, comme un client de
   courrier : les comptes et leurs dossiers, la liste, le lecteur ou la rédaction à la même place. Les surfaces et les filets
   de l'écran des compléments (51-cmp-ecrans.css), jetons seulement : les trois états du thème viennent d'eux (N20). Sous
   900 px, les volets s'empilent ; le lecteur garde la place. */
@layer modules{
  .eml{display:grid;grid-template-columns:184px minmax(200px,280px) minmax(0,1fr);gap:var(--sp-12);min-height:520px;min-width:0}
  .eml.eml-sans-compte{grid-template-columns:184px minmax(0,1fr)}
  .eml.eml-sans-compte .eml-milieu{display:none}
  .eml-cote,.eml-milieu,.eml-vue{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
  .eml-milieu{border-right:1px solid var(--line2);padding-right:var(--sp-12)}
  .eml-cote{border-right:1px solid var(--line2);padding-right:var(--sp-12)}
  .eml .mini{display:inline-flex;align-items:center;gap:var(--sp-6)}
  .eml .mini svg.ic{width:14px;height:14px}
  .eml-ecrire{justify-content:center}
  .eml-compte{display:flex;flex-direction:column;gap:var(--sp-2)}
  .eml-compte-tete{display:flex;align-items:center;gap:var(--sp-6);min-width:0;padding:var(--sp-6) 0 var(--sp-2)}
  .eml-compte-nom{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eml-ic{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--mut);cursor:pointer}
  .eml-ic:hover{color:var(--txt);background:var(--line2)}
  .eml-ic svg{width:14px;height:14px}
  .eml-injoignable{font-size:var(--fs-xs);color:var(--err)}
  .eml-dossiers{display:flex;flex-direction:column}
  .eml-dossier{display:flex;align-items:center;gap:var(--sp-8);width:100%;padding:var(--sp-6) var(--sp-8);border:0;border-radius:var(--radius-sm);
    background:none;color:var(--txt);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
  .eml-dossier:hover{background:var(--line2)}
  .eml-dossier.actif{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:var(--fw-label)}
  .eml-dossier span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eml-badge{flex:none;min-width:18px;padding:0 var(--sp-6);border-radius:var(--radius-pill);font-size:var(--fs-xs);text-align:center;color:var(--on-solid);background:var(--accent)}
  .eml-cote-pied{display:flex;flex-direction:column;gap:var(--sp-6);margin-top:auto;padding-top:var(--sp-12)}
  .eml-alerte-ia{padding:var(--sp-8) var(--sp-10);border-radius:var(--radius);font-size:var(--fs-sm);color:var(--txt);background:color-mix(in srgb,var(--warn) 16%,var(--card));cursor:default}
  .eml-cote .eml-alerte-ia{cursor:pointer}
  .eml-q{width:100%;min-width:0}
  .eml-lignes{display:flex;flex-direction:column;min-width:0;overflow:auto;max-height:70vh;border-radius:var(--radius);background:var(--card)}
  .eml-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-8);width:100%;padding:var(--sp-8) var(--sp-10);border:0;
    background:none;color:var(--mut);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
  .eml-ligne+.eml-ligne{border-top:1px solid var(--line2)}
  .eml-ligne:hover{background:var(--line2)}
  .eml-ligne.actif{background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .eml-l-qui,.eml-l-sujet{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eml-ligne.non-lu .eml-l-qui,.eml-ligne.non-lu .eml-l-sujet{font-weight:var(--fw-strong)}
  .eml-l-sujet,.eml-l-apercu{grid-column:1 / -1}
  .eml-l-apercu{font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eml-l-date{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-xs);color:var(--mut);white-space:nowrap}
  .eml-l-pj svg{width:12px;height:12px}
  .eml-l-ia{margin-right:var(--sp-6);padding:0 var(--sp-6);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--txt);background:color-mix(in srgb,var(--warn) 22%,var(--card))}
  .eml-liste-vide{padding:var(--sp-12)}
  .eml-vue-vide{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-8);flex:1;color:var(--mut);font-size:var(--fs-sm)}
  .eml-vue-vide svg{width:32px;height:32px}
  .eml-lire,.eml-ecrit,.eml-form-compte{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
  .eml-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8)}
  .eml-droite{margin-left:auto}
  .eml-sujet{margin:var(--sp-4) 0 0;font-size:var(--fs-lg);font-weight:var(--fw-strong);color:var(--txt);overflow-wrap:anywhere}
  .eml-meta{display:flex;align-items:baseline;gap:var(--sp-10);font-size:var(--fs-sm);color:var(--mut);min-width:0}
  .eml-de{color:var(--txt);font-weight:var(--fw-label);overflow-wrap:anywhere}
  .eml-meta .eml-l-date{margin-left:auto}
  .eml-a{overflow-wrap:anywhere}
  .eml-fil{display:flex;flex-direction:column;border-radius:var(--radius);background:var(--card);overflow:hidden}
  .eml-fil-t{padding:var(--sp-6) var(--sp-10);font-size:var(--fs-xs);color:var(--mut)}
  .eml-fil-l{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-6) var(--sp-10);border:0;border-top:1px solid var(--line2);background:none;
    color:var(--txt);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
  .eml-fil-l .eml-l-date{margin-left:auto}
  .eml-fil-l.actif{font-weight:var(--fw-label);background:color-mix(in srgb,var(--accent) 8%,transparent)}
  .eml-pieces{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
  .eml-pieces:empty{display:none}
  .eml-piece{display:inline-flex;align-items:center;gap:var(--sp-6);max-width:100%;padding:var(--sp-4) var(--sp-8);border:1px solid var(--line);border-radius:var(--radius-sm);
    font-size:var(--fs-sm);color:var(--txt);text-decoration:none;background:var(--card)}
  .eml-piece svg{width:14px;height:14px;flex:none}
  .eml-piece span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eml-piece-o{color:var(--mut);font-size:var(--fs-xs)}
  .eml-html{width:100%;min-height:360px;flex:1;border:0;border-radius:var(--radius);background:var(--paper)}   /* un courriel HTML suppose une feuille blanche : le papier, même en sombre */
  .eml-texte{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-sm);line-height:1.55;color:var(--txt)}
  .eml-de-ligne{font-size:var(--fs-sm);color:var(--mut)}
  .eml-champ{display:flex;flex-direction:column;gap:var(--sp-4);flex:1 1 220px;min-width:0;font-size:var(--fs-xs);color:var(--mut)}
  .eml-champ.eml-court{flex:0 1 110px}
  .eml-champ input{width:100%;min-width:0}
  .eml-zone{width:100%;min-height:240px;resize:vertical;font:inherit;font-size:var(--fs-sm);line-height:1.55}
  .eml-joindre{cursor:pointer}
  .eml-grille{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-8) var(--sp-10)}
  .eml-coche{display:inline-flex;align-items:center;gap:var(--sp-6);height:32px;font-size:var(--fs-sm);color:var(--txt)}
  .eml-securite{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-14)}
  @media (max-width:900px){
    .eml{grid-template-columns:minmax(0,1fr)}
    .eml-cote,.eml-milieu{border-right:0;padding-right:0}
    .eml-lignes{max-height:40vh}
  }
}