@layer modules{
/* ═══════════════════ NOREPLY MAILCLIENT ═══════════════════
   Client webmail dédié à l'adresse noreply (.mc-*).
   Vue plein écran routée par #mailclient.
   ══════════════════════════════════════════════════════════ */

/* ── Corps plein écran ── */
body.in-mailclient #grid { display:none; }
body.in-mailclient .s-header { display:none; }

.mc-wrap {
  display:flex; flex-direction:column;
  height:100dvh; width:100%;
  background:var(--bg); color:var(--text);
  overflow:hidden;
}

/* ── Barre du haut ── */
.mc-topbar {
  display:flex; align-items:center; gap:var(--sp-10);
  padding:var(--sp-10) var(--sp-16);
  border-bottom:1px solid var(--border);
  background:var(--bg2);
  flex-shrink:0;
}
.mc-topbar-title {
  font-size:var(--fs-base); font-weight:var(--fw-strong); flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mc-topbar-addr {
  font-size:var(--fs-md); color:var(--text2);
  font-weight:var(--fw-regular); margin-left:var(--sp-6);
}
.mc-topbar-actions { display:flex; gap:var(--sp-6); }

/* ── Corps principal : sidebar + panneau ── */
.mc-body {
  display:flex; flex:1; min-height:0;
}

/* ── Sidebar gauche ── */
.mc-sidebar {
  width:190px; flex-shrink:0;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  background:var(--bg2);
  overflow:hidden;
}
.mc-compose-btn {
  margin:var(--sp-12); flex-shrink:0;
}
.mc-nav { flex:1; overflow-y:auto; padding-bottom:var(--sp-8); }
.mc-nav-item {
  display:flex; align-items:center; gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-14); cursor:pointer;
  font-size:var(--fs-md); border-radius:0;
  transition:background .12s;
}
.mc-nav-item:hover { background:var(--hover); }
.mc-nav-item.active { background:var(--accent); color:var(--on-solid); }
.mc-nav-item .mc-badge {
  margin-left:auto; background:var(--accent); color:var(--on-solid);
  border-radius:var(--radius); padding:var(--sp-1) var(--sp-6); font-size:var(--fs-xs); font-weight:var(--fw-strong);
}
.mc-nav-item.active .mc-badge { background:rgba(255,255,255,.3); }

/* ── Zone centrale : liste + lecteur ── */
.mc-main {
  flex:1; display:flex; min-width:0;
}

/* ── Liste de messages ── */
.mc-list {
  width:300px; flex-shrink:0;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.mc-list-head {
  padding:var(--sp-10) var(--sp-14) var(--sp-8);
  border-bottom:1px solid var(--border);
  font-weight:var(--fw-strong); font-size:var(--fs-md);
  color:var(--text2); background:var(--bg);
  display:flex; align-items:center; gap:var(--sp-8);
  flex-shrink:0;
}
.mc-list-scroll { flex:1; overflow-y:auto; }
.mc-msg-row {
  padding:var(--sp-10) var(--sp-14); cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .1s;
}
.mc-msg-row:hover { background:var(--hover); }
.mc-msg-row.active { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.mc-msg-row.unread .mc-msg-from { font-weight:var(--fw-bold); }
.mc-msg-row.unread .mc-msg-subj { font-weight:var(--fw-strong); }
.mc-msg-from {
  font-size:var(--fs-md); color:var(--text); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:var(--sp-4);
}
.mc-msg-from .mc-unread-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}
.mc-msg-subj {
  font-size:var(--fs-md); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:var(--sp-1);
}
.mc-msg-date {
  font-size:var(--fs-xs); color:var(--text2);
  margin-top:var(--sp-2); white-space:nowrap;
}
.mc-list-empty {
  padding:var(--sp-32) var(--sp-14); text-align:center;
  color:var(--text2); font-size:var(--fs-md);
}
.mc-list-loading {
  padding:var(--sp-24) var(--sp-14); text-align:center;
  color:var(--text2); font-size:var(--fs-md);
}
.mc-pagination {
  display:flex; gap:var(--sp-6); align-items:center; justify-content:center;
  padding:var(--sp-8); border-top:1px solid var(--border);
  flex-shrink:0;
}

/* ── Lecteur de message / Compositeur ── */
.mc-reader {
  flex:1; display:flex; flex-direction:column;
  min-width:0; overflow:hidden;
}
.mc-reader-empty {
  flex:1; display:flex; align-items:center; justify-content:center;
  color:var(--text2); font-size:var(--fs-base);
  flex-direction:column; gap:var(--sp-10);
}
.mc-reader-empty svg { opacity:.3; }

/* En-tête du message ouvert */
.mc-reader-head {
  padding:var(--sp-14) var(--sp-20) var(--sp-10);
  border-bottom:1px solid var(--border);
  flex-shrink:0; background:var(--bg2);
}
.mc-reader-subject {
  font-size:var(--fs-lg); font-weight:var(--fw-strong); margin-bottom:var(--sp-6);
}
.mc-reader-meta {
  font-size:var(--fs-md); color:var(--text2);
  display:flex; flex-wrap:wrap; gap:var(--sp-6) var(--sp-14);
}
.mc-reader-meta span { display:flex; align-items:center; gap:var(--sp-4); }
.mc-reader-actions {
  margin-top:var(--sp-10); display:flex; gap:var(--sp-6);
}

/* Corps du message */
.mc-reader-body {
  flex:1; overflow:auto; padding:var(--sp-20);
}
.mc-reader-text {
  white-space:pre-wrap; font-size:var(--fs-md);
  line-height:var(--lh-loose); color:var(--text);
  font-family:inherit;
}
.mc-reader-html {
  font-size:var(--fs-md);
  border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
  background:var(--paper);
}
.mc-reader-html iframe {
  width:100%; border:none; min-height:300px;
}

/* Pièces jointes */
.mc-attachments {
  padding:var(--sp-10) var(--sp-20);
  border-top:1px solid var(--border);
  display:flex; gap:var(--sp-8); flex-wrap:wrap;
  flex-shrink:0;
}
.mc-att-chip {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-10); border-radius:var(--radius-modal);
  background:var(--hover); font-size:var(--fs-sm);
  color:var(--text);
}

/* ── Compositeur ── */
.mc-compose {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden;
}
.mc-compose-head {
  padding:var(--sp-12) var(--sp-20);
  border-bottom:1px solid var(--border);
  font-weight:var(--fw-strong); font-size:var(--fs-base);
  background:var(--bg2); flex-shrink:0;
  display:flex; align-items:center; gap:var(--sp-8);
}
.mc-compose-fields {
  padding:var(--sp-14) var(--sp-20) 0;
  flex-shrink:0;
}
.mc-compose-field {
  display:flex; align-items:center; gap:var(--sp-10);
  border-bottom:1px solid var(--border);
  padding:var(--sp-6) 0;
}
.mc-compose-field label {
  width:65px; font-size:var(--fs-md); color:var(--text2);
  flex-shrink:0; font-weight:var(--fw-medium);
}
.mc-compose-field input {
  flex:1; background:transparent; border:none;
  font-size:var(--fs-md); color:var(--text);
  outline:none; font-family:inherit;
}
.mc-compose-body {
  flex:1; padding:var(--sp-14) var(--sp-20);
  min-height:0;
}
.mc-compose-body textarea {
  width:100%; height:100%;
  resize:none; background:transparent;
  border:none; outline:none;
  font-size:var(--fs-md); color:var(--text);
  font-family:inherit; line-height:var(--lh-loose);
  box-sizing:border-box;
}
.mc-compose-footer {
  padding:var(--sp-10) var(--sp-20);
  border-top:1px solid var(--border);
  display:flex; gap:var(--sp-8); align-items:center;
  flex-shrink:0; background:var(--bg2);
}

/* ── Panneau de configuration ── */
.mc-config {
  flex:1; overflow:auto; padding:var(--sp-24);
  max-width:580px; margin:0 auto;
}
.mc-config h2 { font-size:var(--fs-base); font-weight:var(--fw-strong); margin-bottom:var(--sp-16); }
.mc-config h3 {
  font-size:var(--fs-md); font-weight:var(--fw-strong); text-transform:uppercase;
  letter-spacing:.06em; color:var(--text2);
  margin:var(--sp-20) 0 var(--sp-10);
}
.mc-config-row { margin-bottom:var(--sp-10); }
.mc-config-row label {
  display:block; font-size:var(--fs-md); color:var(--text2);
  margin-bottom:var(--sp-2); font-weight:var(--fw-medium);
}
.mc-config-row input,
.mc-config-row select {
  width:100%; padding:var(--sp-6) var(--sp-10);
  border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg2);
  color:var(--text); font-size:var(--fs-md);
  box-sizing:border-box; font-family:inherit;
}
.mc-config-row input:focus,
.mc-config-row select:focus {
  outline:none; border-color:var(--accent);
}
.mc-config-row-inline {
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-8);
}
.mc-config-actions {
  margin-top:var(--sp-20); display:flex; gap:var(--sp-8);
}
.mc-config-preset {
  display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-bottom:var(--sp-12);
}
.mc-config-preset button {
  padding:var(--sp-4) var(--sp-10); border-radius:var(--radius-xs); font-size:var(--fs-sm);
  background:var(--hover); border:1px solid var(--border);
  cursor:pointer; color:var(--text);
}
.mc-config-preset button:hover { background:var(--accent); color:var(--on-solid); border-color:var(--accent); }

/* ── État vide / non configuré ── */
.mc-unconfigured {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:var(--sp-12); color:var(--text2); text-align:center;
  padding:var(--sp-32);
}
.mc-unconfigured h2 { font-size:var(--fs-base); font-weight:var(--fw-strong); color:var(--text); margin:0; }
.mc-unconfigured p { font-size:var(--fs-md); margin:0; max-width:340px; }

/* ── Responsive ── */
@media(max-width:768px){
  .mc-sidebar { width:56px; }
  .mc-sidebar .mc-nav-item span:not(.mc-badge) { display:none; }
  .mc-compose-btn span:not([data-ic]) { display:none; }
  .mc-list { width:240px; }
}
@media(max-width:560px){
  .mc-list { display:none; }
  .mc-list.mc-list-visible { display:flex; width:100%; }
}

}