/* Webmail 10$ Illimité : charte du site sur Elastic (mode sombre) */

@font-face {
  font-family: "Outfit Variable";
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit.woff2") format("woff2-variations"), url("fonts/outfit.woff2") format("woff2");
}

:root {
  --d-bg: #0c0e0d;
  --d-panel: #111413;
  --d-card: #171b19;
  --d-card2: #202623;
  --d-line: rgba(255, 255, 255, 0.08);
  --d-border: rgba(255, 255, 255, 0.12);
  --d-text: #eef2ef;
  --d-text2: #c3cac5;
  --d-muted: #9aa39d;
  --d-green: #4fb98a;
  --d-green2: #2e9e70;
  --d-green-wash: rgba(79, 185, 138, 0.12);
  --d-on-green: #04170f;
  --d-gold: #e5b834;
  --d-red: #ef4444;
  --d-font: "Outfit Variable", Outfit, "Segoe UI", Arial, sans-serif;
}

/* Socle */

html, body, input, select, textarea, button, .btn, .popover, .ui-dialog {
  font-family: var(--d-font) !important;
}

html.dark-mode body, html.dark-mode #layout {
  background: var(--d-bg) !important;
  color: var(--d-text) !important;
}

::selection { background: var(--d-green); color: var(--d-on-green); }

html.dark-mode a, html.dark-mode a:visited { color: var(--d-green); }
html.dark-mode a:hover { color: var(--d-text); }

:focus-visible { outline: 2px solid var(--d-green) !important; outline-offset: 2px; }
.records-table:focus-visible, .records-table *:focus-visible,
.listing:focus-visible, .listing *:focus-visible, .treelist:focus-visible, .treelist *:focus-visible {
  outline: none !important;
}

#taskmenu a.theme { display: none !important; }

/* Boutons */

html.dark-mode .btn-primary, html.dark-mode .button.mainaction, html.dark-mode button.mainaction,
html.dark-mode .formbuttons .btn-primary, html.dark-mode .ui-dialog-buttonset .mainaction {
  background: var(--d-green) !important;
  border: 1px solid var(--d-green) !important;
  color: var(--d-on-green) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
}
html.dark-mode .btn-primary:hover, html.dark-mode .button.mainaction:hover, html.dark-mode button.mainaction:hover {
  background: var(--d-green2) !important;
  border-color: var(--d-green2) !important;
  color: #fff !important;
}

html.dark-mode .btn-secondary, html.dark-mode .formbuttons .btn:not(.btn-primary),
html.dark-mode .ui-dialog-buttonset .btn:not(.mainaction) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--d-border) !important;
  color: var(--d-text) !important;
  border-radius: 12px !important;
}
html.dark-mode .btn-secondary:hover, html.dark-mode .formbuttons .btn:not(.btn-primary):hover,
html.dark-mode .ui-dialog-buttonset .btn:not(.mainaction):hover {
  border-color: var(--d-green) !important;
  color: var(--d-green) !important;
}

/* Champs */

html.dark-mode .form-control, html.dark-mode .custom-select,
html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode input[type="password"],
html.dark-mode input[type="search"], html.dark-mode textarea, html.dark-mode select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--d-border) !important;
  color: var(--d-text) !important;
}
html.dark-mode .form-control:focus, html.dark-mode input:focus, html.dark-mode textarea:focus, html.dark-mode select:focus {
  border-color: var(--d-green) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  outline: none !important;
}
html.dark-mode .input-group-text {
  background: var(--d-card2) !important;
  border: 1px solid var(--d-border) !important;
  color: var(--d-muted) !important;
}
::placeholder { color: rgba(255, 255, 255, 0.3) !important; opacity: 1; }
html.dark-mode .hint, html.dark-mode .text-muted, html.dark-mode .form-text { color: var(--d-muted) !important; }

html.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--d-green) !important;
  border-color: var(--d-green) !important;
}

/* Menu principal */

html.dark-mode #layout-menu, html.dark-mode #layout-menu .popover-header, html.dark-mode #taskmenu .special-buttons {
  background: var(--d-panel) !important;
}
#layout-menu { border-right: 1px solid var(--d-line) !important; }
#layout-menu .popover-header #logo { display: none !important; }
#layout-menu .popover-header::before {
  content: "10$";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(46, 158, 112, 0.15);
  border: 1px solid rgba(46, 158, 112, 0.25);
  color: var(--d-green);
  font-family: var(--d-font);
  font-weight: 900;
  font-size: 15px;
}
html.dark-mode #taskmenu a, html.dark-mode #taskmenu a::before { color: var(--d-muted) !important; background: transparent !important; }
html.dark-mode #taskmenu a:hover, html.dark-mode #taskmenu a:hover::before { color: var(--d-text) !important; }
html.dark-mode #taskmenu a.selected, html.dark-mode #taskmenu a.selected::before {
  color: var(--d-green) !important;
  background: var(--d-green-wash) !important;
}
html.dark-mode #taskmenu .action-buttons a.compose, html.dark-mode #taskmenu .action-buttons a.compose::before {
  background: var(--d-green) !important;
  color: var(--d-on-green) !important;
}
html.dark-mode #taskmenu .action-buttons a.compose { border-radius: 12px; }

/* Colonnes */

html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode .sidebar, html.dark-mode .listing,
html.dark-mode .boxlistcontent, html.dark-mode #layout-sidebar > .header, html.dark-mode #layout-list > .header,
html.dark-mode .searchbar, html.dark-mode .pagenav, html.dark-mode .footer {
  background: var(--d-panel) !important;
}
html.dark-mode #layout-content, html.dark-mode .content, html.dark-mode #layout-content > .header {
  background: var(--d-bg) !important;
}
html.dark-mode #layout-sidebar, html.dark-mode #layout-list { border-right: 1px solid var(--d-line) !important; }
html.dark-mode .header { border-color: var(--d-line) !important; }
html.dark-mode .header-title, html.dark-mode .boxtitle { color: var(--d-text) !important; font-weight: 600 !important; }

html.dark-mode .toolbar a.button, html.dark-mode .toolbar a.button::before,
html.dark-mode .header a.button, html.dark-mode .header a.button::before { color: var(--d-text2) !important; }
html.dark-mode .toolbar a.button:hover, html.dark-mode .toolbar a.button:hover::before,
html.dark-mode .header a.button:hover, html.dark-mode .header a.button:hover::before {
  color: var(--d-green) !important;
  background: transparent !important;
}

/* Dossiers */

html.dark-mode .treelist li a, html.dark-mode .listing li a { color: var(--d-text2) !important; border-color: var(--d-line) !important; }
html.dark-mode .treelist li a:hover, html.dark-mode .listing li a:hover { background: var(--d-card) !important; }
html.dark-mode .treelist li.selected > a, html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > a *, html.dark-mode .listing li.selected > a::before,
html.dark-mode #settings-menu li.selected > a, html.dark-mode #settings-menu li.selected > a::before,
html.dark-mode #directorylist li.selected > a, html.dark-mode #directorylist li.selected > a::before {
  background: var(--d-green-wash) !important;
  color: var(--d-green) !important;
}
html.dark-mode .unreadcount, html.dark-mode .listing li .unreadcount {
  background: var(--d-green) !important;
  color: var(--d-on-green) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* Liste des messages */

html.dark-mode table.records-table tr, html.dark-mode table.records-table td,
html.dark-mode table.listing tr, html.dark-mode table.listing td {
  background: transparent !important;
  color: var(--d-text2) !important;
}
html.dark-mode .records-table tbody tr td, html.dark-mode table.listing tbody tr td { border-bottom: 1px solid var(--d-line) !important; }
html.dark-mode .records-table tbody tr:hover td, html.dark-mode table.listing tbody tr:hover td { background: var(--d-card) !important; }
html.dark-mode .records-table tbody tr.selected td, html.dark-mode .listing tr.selected td, html.dark-mode #messagelist tr.selected td {
  background: var(--d-green-wash) !important;
  color: var(--d-text) !important;
}
html.dark-mode .records-table tbody tr.focused td:first-child, html.dark-mode .listing tr.focused td:first-child {
  box-shadow: inset 3px 0 0 var(--d-green) !important;
}
html.dark-mode .records-table tr.unread td, html.dark-mode .records-table tr.unread .fromto,
html.dark-mode .records-table tr.unread .subject a { color: var(--d-text) !important; font-weight: 600 !important; }
html.dark-mode .records-table tr.unread .msgicon.status::before { color: var(--d-green) !important; }
html.dark-mode .records-table tr.flagged td, html.dark-mode .records-table tr.flagged td a { color: var(--d-gold) !important; }
html.dark-mode table.listing td .date, html.dark-mode table.listing td .size { color: var(--d-muted) !important; }

/* Lecture */

html.dark-mode #message-header, html.dark-mode .message-partheaders { border-bottom: 1px solid var(--d-line) !important; }
html.dark-mode #message-header .subject { color: var(--d-text) !important; font-weight: 600 !important; }
html.dark-mode #message-header .header-headers { color: var(--d-muted) !important; }

/* Menus et fenêtres */

html.dark-mode .popover, html.dark-mode .ui-dialog, html.dark-mode .dropdown-menu,
html.dark-mode .popover-body, html.dark-mode .ui-dialog-content, html.dark-mode .ui-dialog-titlebar {
  background: var(--d-card) !important;
  color: var(--d-text) !important;
  border-color: var(--d-border) !important;
}
html.dark-mode .popover, html.dark-mode .ui-dialog { border-radius: 14px !important; }
html.dark-mode .popover li a:hover, html.dark-mode .dropdown-item:hover {
  background: var(--d-green-wash) !important;
  color: var(--d-green) !important;
}

html.dark-mode #messagestack div { border-radius: 12px !important; }
html.dark-mode #messagestack div.confirmation { background: var(--d-green) !important; color: var(--d-on-green) !important; }
html.dark-mode #messagestack div.error { background: var(--d-red) !important; color: #fff !important; }

/* Connexion */

body.task-login #logo { display: none !important; }

body.task-login #layout {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh;
}
body.task-login #layout-content {
  flex: 1 1 50% !important;
  width: auto !important;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px !important;
  background: var(--d-bg) !important;
}
body.task-login #login-form {
  position: static !important;
  top: auto !important;
  width: 100%;
  max-width: 420px;
  margin: 0 auto !important;
  padding: 0;
  background: transparent;
}
body.task-login #login-form table td { padding-left: 0 !important; padding-right: 0 !important; }
body.task-login #login-form .form-control { height: 52px; font-size: 15px; border-radius: 12px !important; }
body.task-login #login-form .input-group-text { border-radius: 12px 0 0 12px !important; }
body.task-login #login-form .input-group .form-control { border-radius: 0 12px 12px 0 !important; }
body.task-login #rcmloginsubmit { height: 52px; margin-top: 12px; font-size: 15px; }
body.task-login #login-footer { margin-top: 32px; font-size: 12px !important; color: rgba(255, 255, 255, 0.3) !important; }
body.task-login #login-footer a { color: rgba(255, 255, 255, 0.45) !important; }

.d-brand { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; text-align: left; }
.d-brand .d-marque { margin-bottom: 26px; }
.d-title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--d-text); }
.d-subtitle { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.55); }
.d-accent { color: var(--d-green); }

.d-marque { display: inline-flex; align-items: center; gap: 12px; }
.d-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(46, 158, 112, 0.15);
  border: 1px solid rgba(46, 158, 112, 0.25);
  color: var(--d-green);
  font-weight: 900;
  font-size: 17px;
}
.d-name { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.2em; }

.d-visual {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 56px 64px;
  overflow: hidden;
  color: var(--d-text);
  background:
    linear-gradient(100deg, rgba(10, 10, 15, 0.94) 0%, rgba(10, 10, 15, 0.86) 45%, rgba(10, 26, 15, 0.72) 100%),
    var(--d-bg-img) center / cover no-repeat,
    var(--d-bg);
}
.d-visual::before {
  content: "";
  position: absolute;
  top: -8rem;
  left: -6rem;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, #00d46a 0%, transparent 70%);
  filter: blur(64px);
  opacity: 0.2;
  pointer-events: none;
}
.d-visual > * { position: relative; }
.d-visual-main { max-width: 32rem; }
.d-eyebrow { margin: 0; color: var(--d-green); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; }
.d-hero { margin: 20px 0 0; font-size: clamp(36px, 3.4vw, 48px); font-weight: 900; line-height: 1.1; color: #fff; }
.d-lead { margin: 24px 0 0; color: rgba(255, 255, 255, 0.55); line-height: 1.6; font-size: 16px; }
.d-atouts { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.d-atouts li { display: flex; align-items: center; gap: 16px; color: rgba(255, 255, 255, 0.75); }
.d-atouts i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--d-green);
  font-style: normal;
  font-weight: 700;
}
.d-visual-foot { margin: 0; color: rgba(255, 255, 255, 0.3); font-size: 14px; }

@media (max-width: 1023px) {
  .d-visual { display: none; }
  body.task-login #layout-content { flex-basis: 100% !important; }
}