/* =====================================================================
   DN THEME — Webmail Dahomey Numérique
   Couleurs du logo : bleu nuit #0D1B4B, cyan #1A78E8 → #38B6E8, or #C8A84B
   Feuille chargée en dernier : elle ne modifie que l'apparence.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --dn-navy: #0D1B4B; --dn-navy-2: #12245f; --dn-navy-3: #081033;
  --dn-cyan: #1A78E8; --dn-cyan-2: #38B6E8; --dn-gold: #C8A84B; --dn-gold-2: #E9CF7E;
  --dn-grad: linear-gradient(135deg, #1A78E8 0%, #38B6E8 100%);
  --dn-grad-gold: linear-gradient(135deg, #E9CF7E 0%, #C8A84B 100%);
  --dn-kente: repeating-linear-gradient(90deg,#C8A84B 0 22px,#081033 22px 27px,#1a78e8 27px 39px,#081033 39px 44px,#C8A84B 44px 50px,#38b6e8 50px 56px,#081033 56px 68px);
  /* thème sombre (par défaut) */
  --bg: #070E2C; --panel: #0F1A44; --border: #22306A; --text: #E8ECF7; --text-dim: #A3AED1; --text-faint: #6E7AA6;
  --accent-a: #1A78E8; --accent-b: #38B6E8; --accent-text: #5CC6F2;
  --dn-card: #111E4C; --dn-card-hover: #16265C; --dn-unread: #13245a; --dn-shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.8);
  --dn-radius: 16px;
}
:root.theme-light {
  --bg: #F2F5FB; --panel: #FFFFFF; --border: #DDE3EF; --text: #0D1B4B; --text-dim: #56618A; --text-faint: #8C96B8;
  --accent-text: #1A78E8;
  --dn-card: #FFFFFF; --dn-card-hover: #F6F8FD; --dn-unread: #EEF5FF; --dn-shadow: 0 1px 2px rgba(13,27,75,.05), 0 14px 34px -22px rgba(13,27,75,.35);
}

html body, html body #webmailApp, #webmailApp input, #webmailApp button, #webmailApp select, #webmailApp textarea,
#composeModal, #composeModal input, #composeModal button { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
html body { background: var(--bg) !important; -webkit-font-smoothing: antialiased; }
html body ::-webkit-scrollbar-thumb { background: rgba(56,182,232,.25) !important; }

/* ---------------- barre latérale : toujours bleu nuit ---------------- */
html body #webmailApp .sidebar {
  background: linear-gradient(180deg, #0D1B4B 0%, #0A1640 55%, #081033 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important; position: relative;
}
html body #webmailApp .sidebar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--dn-kente); z-index: 2; }
html body #webmailApp .sidebar-header { padding-top: 24px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
html body #webmailApp .logo-wrap { background: #fff !important; border-radius: 14px !important; box-shadow: 0 10px 24px -12px rgba(0,0,0,.7) !important; }
html body #webmailApp .brand-name { color: #fff !important; font-weight: 800 !important; letter-spacing: -.01em; }
html body #webmailApp .brand-sub { color: #9FB0E0 !important; }
html body #webmailApp .compose-btn {
  background: var(--dn-grad-gold) !important; color: #0D1B4B !important; font-weight: 800 !important;
  border-radius: 14px !important; box-shadow: 0 12px 26px -12px rgba(200,168,75,.9) !important; transition: transform .15s, filter .15s;
}
html body #webmailApp .compose-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
html body #webmailApp .folder-link {
  color: #C3CCEA !important; border-radius: 11px !important; background: transparent !important; transition: background .15s, color .15s;
}
html body #webmailApp .folder-link svg { color: #8FA0D6 !important; }
html body #webmailApp .folder-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
html body #webmailApp .folder-link.active, html body #webmailApp .folder-link[aria-current], html body #webmailApp .folder-link.selected {
  background: linear-gradient(90deg, rgba(56,182,232,.20), rgba(56,182,232,.06)) !important; color: #fff !important;
  box-shadow: inset 3px 0 0 #C8A84B !important;
}
html body #webmailApp .folder-link.active svg { color: #38B6E8 !important; }
html body #webmailApp .folder-badge { background: var(--dn-grad-gold) !important; color: #0D1B4B !important; font-weight: 800 !important; }
html body #webmailApp .folder-divider { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.07) !important; }
html body #webmailApp .dn-accounts-header, html body #webmailApp .dn-accounts-box { color: #8FA0D6 !important; }
html body #webmailApp .dn-accounts-box, html body #webmailApp .dn-current-profile {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important;
}
html body #webmailApp .dn-add-account-mini { background: rgba(200,168,75,.16) !important; color: #E9CF7E !important; border-color: rgba(200,168,75,.35) !important; }
html body #webmailApp .sidebar .lang-btn { background: rgba(255,255,255,.05) !important; color: #C3CCEA !important; border-color: rgba(255,255,255,.1) !important; }
html body #webmailApp .sidebar .lang-btn.active { background: var(--dn-grad) !important; color: #fff !important; border-color: transparent !important; }
html body #webmailApp .dn-current-profile-avatar { background: var(--dn-grad-gold) !important; color: #0D1B4B !important; font-weight: 800 !important; }
html body #webmailApp .sidebar-email { color: #fff !important; }
html body #webmailApp .dn-current-profile-edit { color: #5CC6F2 !important; }
html body #webmailApp .sidebar-footer .btn-logout {
  background: rgba(255,255,255,.05) !important; color: #C3CCEA !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 12px !important;
}
html body #webmailApp .sidebar-footer .btn-logout:hover { background: rgba(56,182,232,.14) !important; color: #fff !important; }
html body #webmailApp .sidebar-footer .btn-logout:last-child { color: #FF9B94 !important; border-color: rgba(240,119,107,.28) !important; background: rgba(240,119,107,.07) !important; }

/* ---------------- zone principale ---------------- */
html body #webmailApp .main-panel { background: var(--bg) !important; }
html body #webmailApp .main-header {
  background: color-mix(in srgb, var(--panel) 82%, transparent) !important; backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
}
html body #webmailApp .main-title { color: var(--text) !important; font-weight: 800 !important; letter-spacing: -.02em !important; font-size: 22px !important; }
html body #webmailApp .btn-refresh { background: transparent !important; color: var(--accent-text) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; padding: 8px 16px !important; font-weight: 700 !important; }
html body #webmailApp .btn-refresh:hover { border-color: var(--dn-cyan-2) !important; }
html body #webmailApp #searchBarWrap { border-bottom: 0 !important; padding: 18px 24px 8px !important; }
html body #webmailApp #searchInput {
  background: var(--dn-card) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; padding: 12px 20px !important;
  color: var(--text) !important; box-shadow: var(--dn-shadow) !important;
}
html body #webmailApp #searchInput:focus { border-color: var(--dn-cyan-2) !important; outline: 3px solid rgba(56,182,232,.18) !important; }
html body #webmailApp .dn-search-btn, html body #webmailApp #searchBarWrap .btn-secondary {
  background: var(--dn-grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important;
  box-shadow: 0 10px 22px -12px rgba(26,120,232,.9) !important;
}

/* ---------------- liste des messages ---------------- */
html body #webmailApp #messageListEl { padding: 8px 24px 40px !important; }
html body #webmailApp #messageListEl .msg-row {
  background: var(--dn-card) !important; border: 1px solid var(--border) !important; border-radius: 14px !important;
  box-shadow: var(--dn-shadow) !important; margin: 0 0 8px !important; color: var(--text-dim) !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease !important; position: relative; overflow: hidden;
}
html body #webmailApp #messageListEl .msg-row:hover { background: var(--dn-card-hover) !important; border-color: rgba(56,182,232,.45) !important; transform: translateY(-1px); }
html body #webmailApp #messageListEl .msg-row.unread { background: var(--dn-unread) !important; color: var(--text) !important; }
html body #webmailApp #messageListEl .msg-row.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dn-grad-gold); }
html body #webmailApp #messageListEl .msg-row.unread .msg-from, html body #webmailApp #messageListEl .msg-row.unread .msg-subject { color: var(--text) !important; font-weight: 800 !important; }
html body #webmailApp #messageListEl .msg-from { color: var(--text) !important; font-weight: 600 !important; }
html body #webmailApp #messageListEl .msg-subject { color: var(--text-dim) !important; }
html body #webmailApp #messageListEl .msg-date { color: var(--text-faint) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html body #webmailApp #messageListEl .msg-row.unread .msg-date { color: var(--accent-text) !important; }
html body #webmailApp #messageListEl .msg-unread-dot { background: var(--dn-gold) !important; box-shadow: 0 0 0 4px rgba(200,168,75,.18) !important; }
html body #webmailApp #messageListEl .msg-row .msg-avatar { color: #fff !important; font-weight: 800 !important; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6) !important; }
html body #webmailApp #messageListEl .msg-row:nth-child(5n+1) .msg-avatar { background: linear-gradient(135deg,#1A78E8,#38B6E8) !important; }
html body #webmailApp #messageListEl .msg-row:nth-child(5n+2) .msg-avatar { background: linear-gradient(135deg,#C8A84B,#E9CF7E) !important; color: #0D1B4B !important; }
html body #webmailApp #messageListEl .msg-row:nth-child(5n+3) .msg-avatar { background: linear-gradient(135deg,#1D3278,#3450A3) !important; }
html body #webmailApp #messageListEl .msg-row:nth-child(5n+4) .msg-avatar { background: linear-gradient(135deg,#157A6E,#2FB39D) !important; }
html body #webmailApp #messageListEl .msg-row:nth-child(5n+5) .msg-avatar { background: linear-gradient(135deg,#7A3FA8,#B06BE0) !important; }
html body #webmailApp .star-toggle { color: var(--text-faint) !important; }
html body #webmailApp .star-toggle.starred { color: var(--dn-gold) !important; text-shadow: 0 0 12px rgba(200,168,75,.45); }
html body #webmailApp .msg-attachment-indicator { background: rgba(56,182,232,.12) !important; border-radius: 8px !important; }
html body #webmailApp .msg-checkbox { accent-color: var(--dn-cyan) !important; }

/* ---------------- lecture d'un message ---------------- */
html body #webmailApp #readView { background: var(--bg) !important; }
html body #webmailApp #readView .back-link {
  background: var(--dn-card) !important; color: var(--accent-text) !important; border: 1px solid var(--border) !important;
  border-radius: 999px !important; padding: 7px 14px !important; font-weight: 700 !important;
}
html body #webmailApp #readContent { max-width: 980px; }
html body #webmailApp #readView .read-message-header { align-items: flex-start !important; }
html body #webmailApp #readView .read-subject { color: var(--text) !important; font-size: 27px !important; font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1.2 !important; }
html body #webmailApp #readView .read-header-action {
  background: var(--dn-card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
  box-shadow: var(--dn-shadow) !important; transition: border-color .15s, color .15s;
}
html body #webmailApp #readView .read-header-action:hover { border-color: var(--dn-cyan-2) !important; color: var(--dn-cyan-2) !important; }

/* carte expéditeur (construite par dn-theme.js) */
html body #webmailApp #readView .dn-sender-card {
  display: flex; align-items: center; gap: 14px; background: var(--dn-card); border: 1px solid var(--border); border-radius: var(--dn-radius);
  padding: 14px 18px; margin: 14px 0 16px; box-shadow: var(--dn-shadow);
}
html body #webmailApp #readView .dn-sender-avatar {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 17px; color: #fff;
  background: var(--dn-grad); box-shadow: 0 8px 18px -10px rgba(26,120,232,.9);
}
html body #webmailApp #readView .dn-sender-avatar.gold { background: var(--dn-grad-gold); color: #0D1B4B; }
html body #webmailApp #readView .dn-sender-main { min-width: 0; flex: 1; }
html body #webmailApp #readView .dn-sender-name { color: var(--text); font-weight: 800; font-size: 15.5px; }
html body #webmailApp #readView .dn-sender-addr { color: var(--text-faint); font-size: 13px; margin-left: 6px; }
html body #webmailApp #readView .dn-sender-to { color: var(--text-dim); font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #webmailApp #readView .dn-sender-date { color: var(--text-faint); font-size: 12.5px; font-weight: 600; text-align: right; white-space: nowrap; }
html body #webmailApp #readView .dn-sender-date b { display: block; color: var(--text); font-size: 13.5px; }
html body #webmailApp #readView .dn-sender-card ~ .read-meta, html body #webmailApp #readView .dn-sender-card ~ .read-date { display: none !important; }
html body #webmailApp #readView .read-meta, html body #webmailApp #readView .read-date { color: var(--text-dim) !important; }

/* Alloma : encadré verre, liseré or */
html body #webmailApp #readView .alloma-mail-panel {
  background: linear-gradient(var(--dn-card), var(--dn-card)) padding-box, linear-gradient(135deg, rgba(200,168,75,.9), rgba(56,182,232,.55)) border-box !important;
  border: 1.5px solid transparent !important; border-radius: var(--dn-radius) !important; box-shadow: var(--dn-shadow) !important;
}
html body #webmailApp #readView .alloma-mail-title { color: var(--text) !important; font-weight: 800 !important; }
html body #webmailApp #readView .alloma-spark { color: var(--dn-gold) !important; text-shadow: 0 0 14px rgba(200,168,75,.6); }
html body #webmailApp #readView .alloma-badge { background: var(--dn-grad-gold) !important; color: #0D1B4B !important; border: 0 !important; font-weight: 800 !important; }
html body #webmailApp #readView .alloma-mail-subtitle { color: var(--text-faint) !important; }
html body #webmailApp #readView .alloma-action-btn {
  background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
  padding: 8px 15px !important; font-weight: 700 !important; transition: all .15s !important;
}
html body #webmailApp #readView .alloma-action-btn:hover { background: var(--dn-grad) !important; color: #fff !important; border-color: transparent !important; }
html body #webmailApp #readView .alloma-result { background: rgba(56,182,232,.07) !important; border: 1px solid rgba(56,182,232,.25) !important; border-radius: 12px !important; color: var(--text) !important; }

/* corps du message : feuille blanche, dans les deux thèmes */
html body #webmailApp #readView .read-body {
  background: #FFFFFF !important; color: #0D1B4B !important; border-radius: 18px !important; padding: 28px 34px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 22px 50px -28px rgba(0,0,0,.65) !important; border: 1px solid rgba(13,27,75,.08) !important; margin-top: 16px !important;
}
html body #webmailApp #readView .read-body pre { color: #0D1B4B !important; white-space: pre-wrap !important; font-family: inherit !important; }

/* pièces jointes : vignettes */
html body #webmailApp #readView .read-attachments { background: transparent !important; border: 0 !important; }
html body #webmailApp #readView .read-attachments-title { color: var(--text) !important; font-weight: 800 !important; }
html body #webmailApp #readView .attachment-count { background: var(--dn-grad-gold) !important; color: #0D1B4B !important; }
html body #webmailApp #readView .attachments-total-size { color: var(--text-faint) !important; }
html body #webmailApp #readView .read-attachment-item {
  background: var(--dn-card) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--dn-cyan-2) !important;
  border-radius: 14px !important; box-shadow: var(--dn-shadow) !important; color: var(--text) !important;
}
html body #webmailApp #readView .read-attachment-item[data-ext="pdf"] { border-left-color: #E5484D !important; }
html body #webmailApp #readView .read-attachment-item[data-ext="img"] { border-left-color: #2FB39D !important; }
html body #webmailApp #readView .read-attachment-item[data-ext="doc"] { border-left-color: #1A78E8 !important; }
html body #webmailApp #readView .read-attachment-item[data-ext="xls"] { border-left-color: #3FAE63 !important; }
html body #webmailApp #readView .attachment-name { color: var(--text) !important; font-weight: 700 !important; }
html body #webmailApp #readView .attach-size { color: var(--text-faint) !important; font-weight: 500 !important; }
html body #webmailApp #readView .attachment-action { border-radius: 999px !important; font-weight: 700 !important; }
html body #webmailApp #readView .attachment-action:first-child { background: transparent !important; color: var(--accent-text) !important; border: 1px solid var(--border) !important; }
html body #webmailApp #readView .attachment-action:last-child { background: var(--dn-grad) !important; color: #fff !important; border: 0 !important; }

/* actions en bas du message */
html body #webmailApp #readView .read-bottom-actions { gap: 10px !important; }
html body #webmailApp #readView .read-action-btn { border-radius: 999px !important; font-weight: 800 !important; padding: 11px 20px !important; }
html body #webmailApp #readView .read-reply-btn { background: var(--dn-grad) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 22px -12px rgba(26,120,232,.9) !important; }
html body #webmailApp #readView .read-forward-btn, html body #webmailApp #readView .read-print-btn { background: var(--dn-card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
html body #webmailApp #readView .read-delete-btn { background: transparent !important; color: #F0776B !important; border: 1px solid rgba(240,119,107,.4) !important; }
:root.theme-light html body #webmailApp #readView .read-delete-btn, :root.theme-light #webmailApp .read-delete-btn { color: #B42318 !important; }

/* ---------------- fenêtre de rédaction ---------------- */
html body #composeModal.modal-overlay { background: rgba(5,10,32,.62) !important; backdrop-filter: blur(6px) !important; }
html body #composeModal .modal-card {
  background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 22px !important;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.75) !important; overflow: hidden; position: relative;
}
html body #composeModal .modal-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--dn-kente); }
html body #composeModal .modal-title { color: var(--text) !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
html body #composeModal .form-label { color: var(--text-dim) !important; font-weight: 700 !important; }
html body #composeModal .form-input, html body #composeModal .chip-input {
  background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; color: var(--text) !important;
}
html body #composeModal .form-input:focus, html body #composeModal .chip-input:focus-within { border-color: var(--dn-cyan-2) !important; outline: 3px solid rgba(56,182,232,.16) !important; }
html body #composeModal .rte-toolbar { background: var(--dn-card) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
html body #composeModal .rte-editable { background: #FFFFFF !important; color: #0D1B4B !important; border-radius: 14px !important; min-height: 220px; }
html body #composeModal .btn-submit {
  background: var(--dn-grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 800 !important;
  padding: 12px 26px !important; box-shadow: 0 12px 26px -12px rgba(26,120,232,.95) !important;
}
html body #composeModal .btn-secondary { border-radius: 999px !important; background: var(--dn-card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; font-weight: 700 !important; }
html body #composeModal .modal-close { color: var(--text-faint) !important; }

/* ---------------- divers ---------------- */
html body .toast { border-radius: 14px !important; background: #0D1B4B !important; border: 1px solid rgba(56,182,232,.35) !important; }
html body .toast.error { background: #7A1E1A !important; }
@media (prefers-reduced-motion: reduce) { html body #webmailApp * { transition: none !important; } }

/* ---------------- ajustements de priorité ---------------- */
html body #webmailApp .sidebar .sidebar-footer { background: transparent !important; border-top: 1px solid rgba(255,255,255,.07) !important; }
html body #webmailApp .sidebar .dn-accounts-list, html body #webmailApp .sidebar .dn-accounts-list * { color: #C3CCEA !important; }
html body #webmailApp .sidebar .dn-sidebar-controls { background: transparent !important; }
html body #webmailApp .sidebar .dn-current-profile-info, html body #webmailApp .sidebar .dn-current-profile-info * { background: transparent !important; }
html body #webmailApp .sidebar .dn-sidebar-controls-separator { background: rgba(255,255,255,.12) !important; }
html body #webmailApp #messageListEl .msg-row:not(.unread) .msg-unread-dot { background: transparent !important; box-shadow: none !important; }
html body #webmailApp #readView #readContent .read-attachment-item .attachment-action:first-child { background: transparent !important; color: var(--accent-text) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
html body #webmailApp #readView #readContent .read-attachment-item .attachment-action:last-child { background: var(--dn-grad) !important; color: #fff !important; border: 0 !important; }
html body #webmailApp #readView #readContent .read-body { background: #FFFFFF !important; color: #0D1B4B !important; border-radius: 18px !important; padding: 28px 34px !important;
  box-shadow: 0 1px 2px rgba(13,27,75,.08), 0 22px 50px -28px rgba(13,27,75,.55) !important; border: 1px solid rgba(13,27,75,.08) !important; }
html body #webmailApp #readView #readContent .read-reply-btn { background: var(--dn-grad) !important; color: #fff !important; border: 0 !important; }
html body #webmailApp #readView #readContent .read-forward-btn, html body #webmailApp #readView #readContent .read-print-btn { background: var(--dn-card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
html body #webmailApp #readView #readContent .read-delete-btn { background: transparent !important; color: #F0776B !important; border: 1px solid rgba(240,119,107,.45) !important; }
html.theme-light body #webmailApp #readView #readContent .read-delete-btn { color: #B42318 !important; }
html body #webmailApp #readView #readContent .read-subject { color: var(--text) !important; }
html body #webmailApp #readView .back-link { background: var(--dn-card) !important; color: var(--accent-text) !important; border: 1px solid var(--border) !important; }

/* ---------------- menu du compte façon Gmail ---------------- */
html body #webmailApp .sidebar .sidebar-footer.dn-footer-empty { display: none !important; }
html body #webmailApp .main-header > div:last-child { align-items: center !important; }
html body .dn-profile-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; flex: none;
  background: var(--dn-grad-gold) center / cover no-repeat; color: #0D1B4B; font-weight: 800; font-size: 14px;
  display: inline-grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 3px rgba(200,168,75,.18); transition: box-shadow .15s, transform .15s;
}
html body .dn-profile-btn:hover, html body .dn-profile-btn.open { box-shadow: 0 0 0 4px rgba(56,182,232,.35); transform: scale(1.03); }
html body .dn-profile-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
html body .dn-profile-btn.has-photo > span { opacity: 0; }
html body .dn-profile-panel {
  position: fixed; top: 76px; right: 20px; z-index: 80; width: 390px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 28px; padding: 16px; box-shadow: 0 30px 80px -24px rgba(0,0,0,.65);
  display: flex; flex-direction: column; gap: 10px; animation: dnPop .16s ease-out;
}
html body .dn-profile-panel[hidden] { display: none !important; }
@keyframes dnPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
html body .dn-profile-panel::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--dn-kente); }
html body .dn-pp-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 22px; cursor: pointer; }
html body .dn-pp-close:hover { background: var(--dn-card-hover); color: var(--text); }
html body .dn-pp-sec { background: var(--dn-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
html body .dn-pp-me .dn-current-profile { background: transparent !important; border: 0 !important; display: flex !important; align-items: center; gap: 14px; padding: 18px 44px 18px 18px !important; margin: 0 !important; }
html body .dn-pp-me .dn-current-profile-avatar { width: 58px !important; height: 58px !important; font-size: 20px !important; flex: none; }
html body .dn-pp-me .sidebar-email { color: var(--text) !important; font-weight: 800 !important; font-size: 15px !important; white-space: normal !important; word-break: break-all; }
html body .dn-pp-me .dn-current-profile-edit { color: var(--accent-text) !important; background: transparent !important; border: 0 !important; padding: 2px 0 !important; font-weight: 700 !important; cursor: pointer; }
html body .dn-pp-accounts .dn-accounts-box { background: transparent !important; border: 0 !important; margin: 0 !important; padding: 12px 14px !important; }
html body .dn-pp-accounts .dn-accounts-header { color: var(--text-faint) !important; font-weight: 800 !important; letter-spacing: .04em; margin-bottom: 6px !important; }
html body .dn-pp-accounts .dn-accounts-list, html body .dn-pp-accounts .dn-accounts-list * { color: var(--text) !important; }
html body .dn-pp-accounts .dn-accounts-list > * { border-radius: 14px !important; }
html body .dn-pp-accounts .dn-accounts-list > *:hover { background: var(--dn-card-hover) !important; }
html body .dn-pp-menu { display: flex; flex-direction: column; padding: 6px; }
html body .dn-profile-panel .dn-pp-item {
  display: flex !important; align-items: center; gap: 10px; width: 100% !important; margin: 0 !important; text-align: left !important;
  background: transparent !important; border: 0 !important; border-radius: 14px !important; padding: 13px 16px !important;
  color: var(--text) !important; font-weight: 700 !important; font-size: 14.5px !important; cursor: pointer;
}
html body .dn-profile-panel .dn-pp-item:hover { background: var(--dn-card-hover) !important; }
html body .dn-profile-panel .dn-pp-item.dn-pp-logout { color: #F0776B !important; border-top: 1px solid var(--border) !important; border-radius: 0 0 14px 14px !important; margin-top: 4px !important; }
html.theme-light body .dn-profile-panel .dn-pp-item.dn-pp-logout { color: #B42318 !important; }
html body .dn-pp-foot { display: flex; justify-content: center; padding: 4px 0 0; }
html body .dn-pp-foot .dn-sidebar-controls { background: transparent !important; border: 0 !important; margin: 0 !important; }
html body .dn-pp-foot .lang-btn { background: var(--dn-card) !important; color: var(--text-dim) !important; border: 1px solid var(--border) !important; }
html body .dn-pp-foot .lang-btn.active { background: var(--dn-grad) !important; color: #fff !important; border-color: transparent !important; }
@media (max-width: 700px) { html body .dn-profile-panel { top: 64px; right: 12px; border-radius: 22px; } }
html body .dn-profile-panel .dn-current-profile-avatar { background: var(--dn-grad-gold) !important; color: #0D1B4B !important; font-weight: 800 !important; border: 0 !important; }

/* ---------------- changement du mot de passe ---------------- */
html body .dn-pw-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(5,10,32,.62); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
html body .dn-pw-card { width: 100%; max-width: 420px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 24px; padding: 26px 24px 20px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.75); position: relative; overflow: hidden; }
html body .dn-pw-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--dn-kente); }
html body .dn-pw-card h3 { margin: 4px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
html body .dn-pw-sub { margin: 0 0 16px; color: var(--text-faint); font-size: 13.5px; }
html body .dn-pw-card label { display: block; font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 12px; }
html body .dn-pw-card input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
html body .dn-pw-card input:focus { outline: 3px solid rgba(56,182,232,.18); border-color: var(--dn-cyan-2); }
html body .dn-pw-hint { font-size: 12.5px; color: var(--text-faint); margin: 2px 0 6px; line-height: 1.45; }
html body .dn-pw-err { min-height: 18px; color: #F0776B; font-size: 13.5px; font-weight: 700; margin: 4px 0 8px; }
html.theme-light body .dn-pw-err { color: #B42318; }
html body .dn-pw-actions { display: flex; justify-content: flex-end; gap: 10px; }
html body .dn-pw-actions button { border-radius: 999px; padding: 11px 18px; font: inherit; font-weight: 800; cursor: pointer; border: 1px solid var(--border); background: var(--dn-card); color: var(--text); }
html body .dn-pw-actions .dn-pw-ok { background: var(--dn-grad); color: #fff; border: 0; box-shadow: 0 10px 22px -12px rgba(26,120,232,.9); }
html body .dn-pw-actions .dn-pw-ok:disabled { opacity: .6; cursor: wait; }

/* =====================================================================
   PALETTE « MESSAGERIE » — distincte de la console de facturation
   (facturation : bleu nuit + or ; messagerie : pétrole + turquoise)
   ===================================================================== */
html[data-dn-palette="petrole"] {
  --mx-deep: #04262E; --mx-deep-2: #06343F; --mx-deep-3: #021A20;
  --mx-teal: #0FB5AE; --mx-teal-2: #3FD8C9; --mx-sky: #38B6E8;
  --dn-grad: linear-gradient(135deg, #0FB5AE 0%, #38B6E8 100%);
  --mx-grad-strong: linear-gradient(135deg, #0A8F8A 0%, #0FB5AE 55%, #3FD8C9 100%);
  --bg: #031B21; --panel: #062A33; --border: #12414C; --text: #E6F4F5; --text-dim: #9CC2C7; --text-faint: #6A959B;
  --accent-text: #4FE0D2; --dn-card: #07313B; --dn-card-hover: #0A3B47; --dn-unread: #0A3D46;
}
html.theme-light[data-dn-palette="petrole"] {
  --bg: #EEF7F7; --panel: #FFFFFF; --border: #D3E6E8; --text: #06343F; --text-dim: #4B6F75; --text-faint: #86A5AA;
  --accent-text: #0A8F8A; --dn-card: #FFFFFF; --dn-card-hover: #F3FAFA; --dn-unread: #E3F6F4;
}
html[data-dn-palette="petrole"] body #webmailApp .sidebar { background: linear-gradient(180deg, #06343F 0%, #04262E 55%, #021A20 100%) !important; }
html[data-dn-palette="petrole"] body #webmailApp .brand-sub { color: #8FD9D2 !important; }
html[data-dn-palette="petrole"] body #webmailApp .compose-btn { background: var(--mx-grad-strong) !important; color: #fff !important; box-shadow: 0 12px 26px -12px rgba(15,181,174,.95) !important; }
html[data-dn-palette="petrole"] body #webmailApp .folder-link { color: #BFE3E4 !important; }
html[data-dn-palette="petrole"] body #webmailApp .folder-link svg { color: #7FC8C6 !important; }
html[data-dn-palette="petrole"] body #webmailApp .folder-link.active { background: linear-gradient(90deg, rgba(63,216,201,.22), rgba(63,216,201,.05)) !important; box-shadow: inset 3px 0 0 #3FD8C9 !important; }
html[data-dn-palette="petrole"] body #webmailApp .folder-link.active svg { color: #3FD8C9 !important; }
html[data-dn-palette="petrole"] body #webmailApp .folder-badge { background: #3FD8C9 !important; color: #04262E !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row.unread::before { background: var(--mx-grad-strong) !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-unread-dot { background: #3FD8C9 !important; box-shadow: 0 0 0 4px rgba(63,216,201,.2) !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row:not(.unread) .msg-unread-dot { background: transparent !important; box-shadow: none !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row:hover { border-color: rgba(63,216,201,.5) !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row:nth-child(5n+1) .msg-avatar { background: linear-gradient(135deg,#0FB5AE,#3FD8C9) !important; color: #fff !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row:nth-child(5n+2) .msg-avatar { background: linear-gradient(135deg,#1A78E8,#38B6E8) !important; color: #fff !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row:nth-child(5n+3) .msg-avatar { background: linear-gradient(135deg,#E0714F,#F2A65A) !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row:nth-child(5n+4) .msg-avatar { background: linear-gradient(135deg,#6C4AD6,#9B7BF0) !important; }
html[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-row:nth-child(5n+5) .msg-avatar { background: linear-gradient(135deg,#0D6E8A,#2BA3C4) !important; }
html[data-dn-palette="petrole"] body #webmailApp #searchInput:focus, html[data-dn-palette="petrole"] body #composeModal .form-input:focus { border-color: #3FD8C9 !important; outline-color: rgba(63,216,201,.2) !important; }
html[data-dn-palette="petrole"] body .dn-profile-btn { background: var(--mx-grad-strong) center / cover no-repeat; color: #fff; box-shadow: 0 0 0 3px rgba(63,216,201,.22); }
html[data-dn-palette="petrole"] body .dn-profile-panel .dn-current-profile-avatar, html[data-dn-palette="petrole"] body #webmailApp .dn-current-profile-avatar { background: var(--mx-grad-strong) !important; color: #fff !important; }
html[data-dn-palette="petrole"] body #webmailApp #readView .dn-sender-avatar.gold { background: var(--mx-grad-strong); color: #fff; }
html[data-dn-palette="petrole"] body #webmailApp #readView .alloma-mail-panel {
  background: linear-gradient(var(--dn-card), var(--dn-card)) padding-box, linear-gradient(135deg, rgba(63,216,201,.9), rgba(56,182,232,.45)) border-box !important;
}
html[data-dn-palette="petrole"] body #webmailApp #readView .alloma-spark { color: #3FD8C9 !important; text-shadow: 0 0 14px rgba(63,216,201,.6); }
html[data-dn-palette="petrole"] body #webmailApp #readView .alloma-badge, html[data-dn-palette="petrole"] body #webmailApp #readView .attachment-count { background: #3FD8C9 !important; color: #04262E !important; }
html[data-dn-palette="petrole"] body #webmailApp .star-toggle.starred { color: #F5B83D !important; }
html[data-dn-palette="petrole"] body .toast { background: #06343F !important; border-color: rgba(63,216,201,.4) !important; }
/* liseré : turquoise et bleu (la facturation garde le kente or) */
html[data-dn-palette="petrole"] { --dn-kente: repeating-linear-gradient(90deg,#3FD8C9 0 22px,#021A20 22px 27px,#38B6E8 27px 39px,#021A20 39px 44px,#0FB5AE 44px 56px,#021A20 56px 62px); }

/* =====================================================================
   PALETTE « AMÉTHYSTE » — distincte de la console de facturation
   (facturation : bleu nuit + or ; messagerie : pétrole + turquoise)
   ===================================================================== */
html[data-dn-palette="amethyste"] {
  --mx-deep: #1B0F3A; --mx-deep-2: #2A1659; --mx-deep-3: #12092A;
  --mx-teal: #7C4DFF; --mx-teal-2: #B69CFF; --mx-sky: #E86FB6;
  --dn-grad: linear-gradient(135deg, #7C4DFF 0%, #E86FB6 100%);
  --mx-grad-strong: linear-gradient(135deg, #5B2FD6 0%, #7C4DFF 55%, #B69CFF 100%);
  --bg: #0E0822; --panel: #1A1040; --border: #33256B; --text: #F1EDFB; --text-dim: #B9AEDB; --text-faint: #8779B8;
  --accent-text: #C4AEFF; --dn-card: #1E1349; --dn-card-hover: #261959; --dn-unread: #2A1A63;
}
html.theme-light[data-dn-palette="amethyste"] {
  --bg: #F5F2FC; --panel: #FFFFFF; --border: #E2DAF5; --text: #2A1659; --text-dim: #5A4C86; --text-faint: #9A8FC0;
  --accent-text: #5B2FD6; --dn-card: #FFFFFF; --dn-card-hover: #F8F5FE; --dn-unread: #EFE8FD;
}
html[data-dn-palette="amethyste"] body #webmailApp .sidebar { background: linear-gradient(180deg, #2A1659 0%, #1B0F3A 55%, #12092A 100%) !important; }
html[data-dn-palette="amethyste"] body #webmailApp .brand-sub { color: #CDBBFF !important; }
html[data-dn-palette="amethyste"] body #webmailApp .compose-btn { background: var(--mx-grad-strong) !important; color: #fff !important; box-shadow: 0 12px 26px -12px rgba(124,77,255,.95) !important; }
html[data-dn-palette="amethyste"] body #webmailApp .folder-link { color: #DCD2F7 !important; }
html[data-dn-palette="amethyste"] body #webmailApp .folder-link svg { color: #A996E6 !important; }
html[data-dn-palette="amethyste"] body #webmailApp .folder-link.active { background: linear-gradient(90deg, rgba(182,156,255,.22), rgba(182,156,255,.05)) !important; box-shadow: inset 3px 0 0 #B69CFF !important; }
html[data-dn-palette="amethyste"] body #webmailApp .folder-link.active svg { color: #B69CFF !important; }
html[data-dn-palette="amethyste"] body #webmailApp .folder-badge { background: #B69CFF !important; color: #1B0F3A !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row.unread::before { background: var(--mx-grad-strong) !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-unread-dot { background: #B69CFF !important; box-shadow: 0 0 0 4px rgba(182,156,255,.2) !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row:not(.unread) .msg-unread-dot { background: transparent !important; box-shadow: none !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row:hover { border-color: rgba(182,156,255,.5) !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row:nth-child(5n+1) .msg-avatar { background: linear-gradient(135deg,#7C4DFF,#B69CFF) !important; color: #fff !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row:nth-child(5n+2) .msg-avatar { background: linear-gradient(135deg,#1A78E8,#E86FB6) !important; color: #fff !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row:nth-child(5n+3) .msg-avatar { background: linear-gradient(135deg,#E0714F,#F2A65A) !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row:nth-child(5n+4) .msg-avatar { background: linear-gradient(135deg,#6C4AD6,#9B7BF0) !important; }
html[data-dn-palette="amethyste"] body #webmailApp #messageListEl .msg-row:nth-child(5n+5) .msg-avatar { background: linear-gradient(135deg,#0D6E8A,#2BA3C4) !important; }
html[data-dn-palette="amethyste"] body #webmailApp #searchInput:focus, html[data-dn-palette="amethyste"] body #composeModal .form-input:focus { border-color: #B69CFF !important; outline-color: rgba(182,156,255,.2) !important; }
html[data-dn-palette="amethyste"] body .dn-profile-btn { background: var(--mx-grad-strong) center / cover no-repeat; color: #fff; box-shadow: 0 0 0 3px rgba(182,156,255,.22); }
html[data-dn-palette="amethyste"] body .dn-profile-panel .dn-current-profile-avatar, html[data-dn-palette="amethyste"] body #webmailApp .dn-current-profile-avatar { background: var(--mx-grad-strong) !important; color: #fff !important; }
html[data-dn-palette="amethyste"] body #webmailApp #readView .dn-sender-avatar.gold { background: var(--mx-grad-strong); color: #fff; }
html[data-dn-palette="amethyste"] body #webmailApp #readView .alloma-mail-panel {
  background: linear-gradient(var(--dn-card), var(--dn-card)) padding-box, linear-gradient(135deg, rgba(182,156,255,.9), rgba(56,182,232,.45)) border-box !important;
}
html[data-dn-palette="amethyste"] body #webmailApp #readView .alloma-spark { color: #B69CFF !important; text-shadow: 0 0 14px rgba(182,156,255,.6); }
html[data-dn-palette="amethyste"] body #webmailApp #readView .alloma-badge, html[data-dn-palette="amethyste"] body #webmailApp #readView .attachment-count { background: #B69CFF !important; color: #1B0F3A !important; }
html[data-dn-palette="amethyste"] body #webmailApp .star-toggle.starred { color: #F5B83D !important; }
html[data-dn-palette="amethyste"] body .toast { background: #2A1659 !important; border-color: rgba(182,156,255,.4) !important; }
/* liseré : turquoise et bleu (la facturation garde le kente or) */
html[data-dn-palette="amethyste"] { --dn-kente: repeating-linear-gradient(90deg,#B69CFF 0 22px,#12092A 22px 27px,#E86FB6 27px 39px,#12092A 39px 44px,#7C4DFF 44px 56px,#12092A 56px 62px); }


/* ---------------- choix de la palette (menu du compte) ---------------- */
html body .dn-pp-palettes { display: flex; gap: 8px; justify-content: center; padding: 2px 0 6px; }
html body .dn-pal { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--dn-card); color: var(--text-dim);
  border-radius: 999px; padding: 6px 12px 6px 6px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
html body .dn-pal i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
html body .dn-pal[data-p="petrole"] i { background: linear-gradient(135deg,#04262E 0 45%,#3FD8C9 45%); }
html body .dn-pal[data-p="nuit"] i { background: linear-gradient(135deg,#0D1B4B 0 45%,#C8A84B 45%); }
html body .dn-pal[data-p="amethyste"] i { background: linear-gradient(135deg,#1B0F3A 0 45%,#B69CFF 45%); }
html body .dn-pal.on { color: var(--text); border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent); }

/* ---------------- barre d'actions groupées et boutons de recherche : bien lisibles (jour et nuit) ---------------- */
html body #webmailApp #bulkToolbar {
  background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 16px !important;
  margin: 6px 24px 10px !important; padding: 10px 14px !important; box-shadow: var(--dn-shadow) !important; flex-wrap: wrap; row-gap: 8px !important;
}
html body #webmailApp #bulkToolbar label, html body #webmailApp #bulkToolbar label span { color: var(--text) !important; font-weight: 700 !important; }
html body #webmailApp #selectedCountLabel { color: var(--accent-text) !important; font-weight: 800 !important; }
html body #webmailApp #bulkToolbar input[type="checkbox"] { accent-color: var(--accent-text); width: 16px; height: 16px; }
html body #webmailApp #bulkToolbar button {
  background: var(--dn-card) !important; color: var(--text) !important; border: 1.5px solid color-mix(in srgb, var(--accent-text) 45%, var(--border)) !important;
  border-radius: 999px !important; padding: 8px 15px !important; font-weight: 800 !important; font-size: 13.5px !important; opacity: 1 !important;
  box-shadow: 0 2px 6px -3px rgba(0,0,0,.25) !important; margin: 0 !important; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
html body #webmailApp #bulkToolbar button:hover { background: var(--dn-grad) !important; color: #fff !important; border-color: transparent !important; }
html body #webmailApp #bulkToolbar button.btn-delete, html body #webmailApp #bulkToolbar button[onclick*="delete"] {
  color: #C0262D !important; border-color: rgba(192,38,45,.55) !important; background: var(--dn-card) !important;
}
html:not(.theme-light) body #webmailApp #bulkToolbar button.btn-delete, html:not(.theme-light) body #webmailApp #bulkToolbar button[onclick*="delete"] { color: #FF8A82 !important; border-color: rgba(255,138,130,.55) !important; }
html body #webmailApp #bulkToolbar button.btn-delete:hover, html body #webmailApp #bulkToolbar button[onclick*="delete"]:hover { background: #C0262D !important; color: #fff !important; border-color: transparent !important; }
html body #webmailApp #searchBarWrap button:not(.hidden) { white-space: nowrap !important; display: inline-flex !important; align-items: center; gap: 6px; padding: 11px 18px !important; font-weight: 800 !important; }
html body #webmailApp #searchBarWrap button:not(.dn-search-btn) {
  background: var(--dn-card) !important; color: var(--text) !important; border: 1.5px solid color-mix(in srgb, var(--accent-text) 45%, var(--border)) !important; border-radius: 999px !important; box-shadow: none !important;
}
html body #webmailApp #searchBarWrap button:not(.dn-search-btn):hover { background: var(--dn-grad) !important; color: #fff !important; border-color: transparent !important; }
/* textes secondaires un peu plus contrastés en mode jour */
html.theme-light body #webmailApp #messageListEl .msg-subject { color: #3E3A5C !important; }
html.theme-light[data-dn-palette="petrole"] body #webmailApp #messageListEl .msg-subject { color: #2F555B !important; }
html.theme-light[data-dn-palette="nuit"] body #webmailApp #messageListEl .msg-subject { color: #3A4670 !important; }
html.theme-light body #webmailApp #messageListEl .msg-date { color: #5D6283 !important; }
html.theme-light body #webmailApp .star-toggle:not(.starred) { color: #8E93AE !important; }

/* ---------------- photo dans la signature ---------------- */
html body #signatureModal .dn-sigphoto { display: flex; gap: 16px; align-items: center; background: var(--dn-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin: 0 0 16px; }
html body .dn-sigphoto-pic { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff;
  background: var(--dn-grad) center / cover no-repeat; box-shadow: 0 10px 22px -12px rgba(0,0,0,.6); border: 3px solid var(--panel); }
html body .dn-sigphoto-pic.has { background-color: #fff; }
html body .dn-sigphoto-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html body .dn-sigphoto-main b { color: var(--text); font-size: 14.5px; }
html body .dn-sigphoto-main > span { color: var(--text-faint); font-size: 12.5px; }
html body .dn-sigphoto-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
html body .dn-sigphoto-btn { border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; background: var(--dn-grad); color: #fff; border: 0; }
html body .dn-sigphoto-btn.ghost { background: transparent; color: #E5484D; border: 1px solid rgba(229,72,77,.5); }
html body .dn-sigphoto-chk { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer; }
html body .dn-sigphoto-chk input { accent-color: var(--accent-text); width: 16px; height: 16px; }

/* ---------------- corps du message jamais tronqué ---------------- */
html body #webmailApp #readView #readContent .read-body { max-height: none !important; overflow: visible !important; height: auto !important; }
html body #webmailApp #readView #readContent .read-body iframe { max-height: none !important; min-height: 40px; display: block; }
html body #webmailApp #readContent .read-attachment-item[data-dn-sig] { display: none !important; }