/* =======================================================================
   Webmail Harinjaka — charte « brut & matériel » sur le thème Elastic
   Encre #0E0E0E · Signal #E8402A · Papier #E6E1D7 / #DBD5CA
   Bordures 2 px, aucun arrondi, aucune ombre. Couleurs et typographie
   seulement : la disposition d'Elastic (et son mode mobile) reste intacte.
   ======================================================================= */

@font-face { font-family: Archivo; font-weight: 400; font-display: swap; src: url("fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-weight: 600; font-display: swap; src: url("fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-weight: 700; font-display: swap; src: url("fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo Black"; font-weight: 400; font-display: swap; src: url("fonts/archivo-black-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
  --h-ink: #0e0e0e;
  --h-signal: #e8402a;
  --h-paper: #e6e1d7;
  --h-paper2: #dbd5ca;
  --h-line: rgba(14, 14, 14, 0.14);
  /* Filet fin de la boîte : la page de connexion garde ses 2 px d’encre */
  --h-rule: rgba(14, 14, 14, 0.2);
  --h-display: "Archivo Black", Archivo, Helvetica, sans-serif;
  --h-body: Archivo, Helvetica, Arial, sans-serif;
  --h-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------- socle */

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

body, #layout {
  background: var(--h-paper) !important;
  color: var(--h-ink) !important;
}

*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

::selection { background: var(--h-signal); color: #fff; }

a, a:visited { color: var(--h-ink); }
a:hover, a:focus { color: var(--h-signal); }

:focus-visible {
  outline: 2px solid var(--h-signal) !important;
  outline-offset: 2px;
}
/* Listes : la ligne active porte déjà sa barre rouge, pas de cadre en plus */
.records-table:focus-visible, .records-table *:focus-visible,
.listing:focus-visible, .listing *:focus-visible, .treelist:focus-visible, .treelist *:focus-visible {
  outline: none !important;
}

/* Le mode sombre d'Elastic n'a pas sa place dans la charte */
#taskmenu a.theme { display: none !important; }

/* ------------------------------------------------------------- boutons */

.btn-primary, .btn.btn-primary, .button.mainaction, button.mainaction,
.formbuttons .btn-primary, .ui-dialog-buttonset .mainaction {
  background: var(--h-signal) !important;
  border: 2px solid var(--h-signal) !important;
  color: #fff !important;
  font-family: var(--h-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Survol seulement : un bouton qui garde le focus (Envoyer, Connexion) reste plein */
.btn-primary:hover, .btn.btn-primary:hover, .button.mainaction:hover, button.mainaction:hover {
  background: transparent !important;
  color: var(--h-signal) !important;
}
.btn-primary:focus:not(:hover), .button.mainaction:focus:not(:hover), button.mainaction:focus:not(:hover) {
  background: var(--h-signal) !important;
  color: #fff !important;
}

.btn-secondary, .formbuttons .btn:not(.btn-primary), .ui-dialog-buttonset .btn:not(.mainaction) {
  background: transparent !important;
  border: 2px solid var(--h-ink) !important;
  color: var(--h-ink) !important;
  font-family: var(--h-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}
.btn-secondary:hover, .formbuttons .btn:not(.btn-primary):hover, .ui-dialog-buttonset .btn:not(.mainaction):hover {
  background: var(--h-ink) !important;
  color: var(--h-paper) !important;
}

/* -------------------------------------------------------------- champs */

.form-control, .custom-select, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
  border: 1px solid var(--h-rule) !important;
  background-color: #fff !important;
  color: var(--h-ink) !important;
}
/* Champ actif : la bordure passe au signal, sans contour en plus */
.form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus,
.form-control:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--h-signal) !important;
  outline: none !important;
}
.input-group-text {
  background: var(--h-paper2) !important;
  border: 1px solid var(--h-rule) !important;
  color: var(--h-ink) !important;
}
/* Interrupteurs : rail papier + filet d’encre, curseur encre ; activé = rail signal, curseur blanc */
.custom-switch .custom-control-label::before {
  background-color: var(--h-paper2) !important;
  border: 1px solid var(--h-ink) !important;
}
.custom-switch .custom-control-label::after { background-color: var(--h-ink) !important; }
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--h-signal) !important;
  border-color: var(--h-signal) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff !important; }
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  outline: 2px solid var(--h-signal) !important;
  outline-offset: 2px;
}

/* Textes d’aide et indications : lisibles sur le papier (Elastic : #737677) */
.hint, .formcontent .hint, .file-upload .hint, .text-muted, .form-text {
  color: rgba(14, 14, 14, 0.72) !important;
  font-style: normal !important;
}
::placeholder { color: rgba(14, 14, 14, 0.5) !important; opacity: 1; }
#compose-attachments, .file-upload {
  border-color: rgba(14, 14, 14, 0.35) !important;
}

/* --------------------------------------------- menu principal (gauche) */

#layout-menu {
  background: var(--h-ink) !important;
  border-right: 0 !important;
}
#layout-menu .popover-header #logo { display: none !important; }
#layout-menu .popover-header::before {
  content: "H";
  font-family: var(--h-display);
  font-size: 28px;
  line-height: 1;
  color: var(--h-paper);
}
#layout-menu .popover-header::after {
  content: ".";
  font-family: var(--h-display);
  font-size: 28px;
  line-height: 1;
  color: var(--h-signal);
}
#taskmenu a, #taskmenu a:visited, #taskmenu a::before {
  color: var(--h-paper) !important;
  background: transparent !important;
}
/* Libellés courts et serrés : « Déconnexion » tient dans la colonne */
#taskmenu a .inner {
  font-family: var(--h-mono) !important;
  font-size: 9px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: visible !important;
  text-overflow: clip !important;
}
#taskmenu a:hover, #taskmenu a:hover::before { color: var(--h-signal) !important; }
/* Section active : texte signal et barre à gauche ; seul « Rédiger » est un aplat rouge */
#taskmenu a.selected, #taskmenu a.selected::before {
  background: transparent !important;
  color: var(--h-signal) !important;
}
#taskmenu a.selected { border-left: 3px solid var(--h-signal) !important; }
#taskmenu .special-buttons { background: var(--h-ink) !important; }
#taskmenu .special-buttons a .inner {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#taskmenu .special-buttons a { min-height: 44px; }
#taskmenu a.logout, #taskmenu a.logout::before { color: var(--h-signal) !important; }
#taskmenu .action-buttons a.compose {
  background: var(--h-signal) !important;
  color: #fff !important;
}
#taskmenu .action-buttons a.compose:hover { background: #fff !important; color: var(--h-signal) !important; }

/* ------------------------------------------------------------ colonnes */

#layout-sidebar, #layout-list, #layout-content, .sidebar, .content, .listing, .boxlistcontent {
  background: var(--h-paper) !important;
}
#layout-sidebar, #layout-list { border-right: 1px solid var(--h-rule) !important; }

#layout-sidebar > .header, #layout-list > .header, #layout-content > .header,
.header, .footer, .searchbar, .pagenav {
  background: var(--h-paper) !important;
  border-color: var(--h-rule) !important;
}
#layout-sidebar > .header, #layout-list > .header, #layout-content > .header {
  border-bottom: 1px solid var(--h-rule) !important;
}
.header .header-title, .header-title, .boxtitle, h2.boxtitle {
  font-family: var(--h-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--h-ink) !important;
}

/* Barres d'outils : icônes encre, survol signal */
.toolbar a.button, .toolbar a.button::before, .header a.button, .header a.button::before {
  color: var(--h-ink) !important;
}
.toolbar a.button:hover, .toolbar a.button:hover::before,
.header a.button:hover, .header a.button:hover::before {
  color: var(--h-signal) !important;
  background: transparent !important;
}
/* Tous les libellés de barre d’outils dans la même police, casse normale */
.toolbar a.button .inner, .toolbar a.button span.inner {
  font-family: var(--h-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ------------------------------------------------------------- dossiers */

.treelist li a, .listing li a, #mailboxlist li a, #directorylist li a, #settings-menu li a {
  color: var(--h-ink) !important;
  border-color: var(--h-line) !important;
}
.treelist li a:hover, .listing li a:hover, .listing li:hover > a { background: var(--h-paper2) !important; }
.treelist li.selected > a, .listing li.selected > a, .listing li.selected > a::before,
#mailboxlist li.selected > a, #mailboxlist li.selected > a::before, .listing li.selected > a .unreadcount {
  background: var(--h-ink) !important;
  color: var(--h-paper) !important;
}
.treelist li.unread > a, #mailboxlist li.unread > a { font-weight: 700; }
.unreadcount, .listing li .unreadcount, #mailboxlist li .unreadcount {
  background: var(--h-signal) !important;
  color: #fff !important;
  font-family: var(--h-mono) !important;
  font-weight: 500 !important;
}

/* ------------------------------------------------- liste des messages */

/* Roundcube 1.7 : la liste est .listing / #messagelist (plus seulement .records-table) */
table.records-table, .records-table tbody, .records-table tr, .records-table td,
table.listing, table.listing tbody, table.listing tr, table.listing td {
  background: transparent !important;
  color: var(--h-ink) !important;
}
.records-table tbody tr td, table.listing tbody tr td { border-bottom: 1px solid var(--h-line) !important; }
.records-table tbody tr:hover td, table.listing tbody tr:hover td { background: var(--h-paper2) !important; }
.records-table tbody tr.selected td, .records-table tbody tr.selected:hover td,
.listing tr.selected td, .listing tr.selected:hover td, #messagelist tr.selected td {
  background: var(--h-ink) !important;
  color: var(--h-paper) !important;
}
.records-table tbody tr.selected td a, .records-table tbody tr.selected td span,
.records-table tbody tr.selected td::before, .records-table tbody tr.selected td span::before,
.listing tr.selected td a, .listing tr.selected td span, .listing tr.selected td span::before {
  color: var(--h-paper) !important;
}
.records-table tbody tr.focused td:first-child, .listing tr.focused td:first-child { box-shadow: inset 4px 0 0 var(--h-signal) !important; }
.records-table tr.unread td.subject .subject a,
.records-table tr.unread td.subject span.subject,
.records-table tr.unread .fromto { font-weight: 700 !important; }
.records-table tr.unread td.subject .msgicon.status::before,
.records-table tr.unread .msgicon.status::before,
.records-table tr.unread td.flags .unread::before { color: var(--h-signal) !important; }
.records-table td .date, .records-table td span.date, .records-table td .size {
  font-family: var(--h-mono) !important;
  font-size: 0.78em;
  letter-spacing: 0.02em;
}
.records-table tr.flagged td, .records-table tr.flagged td a { color: var(--h-signal) !important; }

/* ------------------------------------------------------------- lecture */

#message-header .subject, #messagestack .subject, .message-partheaders .subject {
  font-family: var(--h-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
#message-header, .message-partheaders { border-bottom: 1px solid var(--h-rule) !important; }
#messagebody, .message-part, #message-content .message-part { background: transparent !important; }
.message-header .header-headers, #message-header .header-headers { font-family: var(--h-mono) !important; font-size: 12px; }

/* ------------------------------------------------- menus et fenêtres */

.popover, .ui-dialog, .dropdown-menu {
  background: var(--h-paper) !important;
  border: 1px solid var(--h-ink) !important;
  color: var(--h-ink) !important;
}
.popover-body, .ui-dialog-content {
  background: var(--h-paper) !important;
  border: 0 !important;
  color: var(--h-ink) !important;
}
.popover .arrow { display: none !important; }
.popover a.active:hover, .popover li a:hover, .dropdown-item:hover {
  background: var(--h-ink) !important;
  color: var(--h-paper) !important;
}
.ui-dialog-titlebar {
  background: var(--h-paper) !important;
  border-bottom: 2px solid var(--h-ink) !important;
}
.ui-dialog-title {
  font-family: var(--h-display) !important;
  text-transform: uppercase;
}

/* Messages de statut (envoyé, erreur…) */
#messagestack div { border: 2px solid var(--h-ink) !important; }
#messagestack div.confirmation { background: var(--h-ink) !important; color: var(--h-paper) !important; }
#messagestack div.error { background: var(--h-signal) !important; color: #fff !important; }

/* ===================================================== page de connexion */

body.task-login, body.task-login #layout, body.task-login #layout-content {
  background: var(--h-paper) !important;
}
body.task-login #logo { display: none !important; }

body.task-login #login-form {
  width: 100%;
  max-width: 440px;
  padding: 36px 32px 28px;
  border: 2px solid var(--h-ink);
  background: var(--h-paper);
}

.h-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--h-ink);
  text-align: left;
}
.h-logo {
  font-family: var(--h-display);
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--h-ink);
}
.h-dot, .h-signal { color: var(--h-signal); }
/* « WEBMAIL » sur une seule ligne, « MAIL » en signal */
.h-title {
  font-family: var(--h-display);
  font-size: clamp(40px, 12vw, 58px);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--h-ink);
}

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: 2px solid var(--h-ink) !important;
}
body.task-login #login-form .form-control:focus { border-color: var(--h-signal) !important; }
body.task-login #login-form .input-group-text {
  background: var(--h-ink) !important;
  border: 2px solid var(--h-ink) !important;
  color: var(--h-paper) !important;
}
body.task-login #rcmloginsubmit {
  height: 56px;
  margin-top: 8px;
  font-size: 15px;
}

body.task-login #login-footer {
  margin-top: 22px;
  font-family: var(--h-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h-ink) !important;
  opacity: 0.6;
}
body.task-login #login-footer a { color: var(--h-ink) !important; }

body.task-login #messagestack div.error,
body.task-login .boxerror, body.task-login .alert-danger {
  background: var(--h-signal) !important;
  border: 2px solid var(--h-signal) !important;
  color: #fff !important;
}

/* Textes secondaires de la liste et de la lecture : même gris lisible que les aides */
table.listing td .fromto, table.listing td span.fromto, table.listing td .date,
table.listing td span.date, table.listing td .size, table.listing td .flags,
#message-header .header-headers, #message-header .header-links a,
.message-partheaders .header-links a, .listing li .details, .listing li .email {
  color: rgba(14, 14, 14, 0.72) !important;
}
table.listing tr.selected td .fromto, table.listing tr.selected td .date,
table.listing tr.selected td .size { color: rgba(230, 225, 215, 0.8) !important; }

/* Ligne sélectionnée des listes à identifiant (paramètres, contacts, dossiers) :
   leur couleur d'encre l'emportait sur la sélection et rendait le libellé invisible */
#settings-menu li.selected > a, #settings-menu li.selected > a *, #settings-menu li.selected > a::before,
#directorylist li.selected > a, #directorylist li.selected > a *, #directorylist li.selected > a::before,
#mailboxlist li.selected > a *, .listing li.selected > a *, .listing li.selected > div > a {
  color: var(--h-paper) !important;
}
#settings-menu li.selected > a, #directorylist li.selected > a { background: var(--h-ink) !important; }

/* En-tête du menu (logo « H. ») : encre comme le reste de la colonne */
#layout-menu .popover-header { background: var(--h-ink) !important; }

/* ============================================ connexion en deux colonnes
   Gauche : visuel repris de l'accueil du portfolio. Droite : le formulaire.
   Sous 900 px, le visuel disparaît, seul le formulaire reste. */

.h-subtitle {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(14, 14, 14, 0.75);
}

body.task-login #layout {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh;
}
body.task-login #layout-content {
  flex: 1 1 44% !important;
  width: auto !important;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px !important;
}

.h-visual {
  flex: 1 1 56%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 100vh;
  padding: 36px 48px;
  background: var(--h-ink);
  color: var(--h-paper);
}
.h-visual-top, .h-visual-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--h-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.h-visual-top { padding-bottom: 20px; border-bottom: 2px solid rgba(230, 225, 215, 0.25); }
.h-visual-foot { padding-top: 20px; border-top: 2px solid rgba(230, 225, 215, 0.25); }
.h-visual-logo {
  font-family: var(--h-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.h-visual-meta { display: flex; align-items: center; gap: 8px; }
.h-visual-meta i { display: inline-block; width: 8px; height: 8px; background: var(--h-signal); }

.h-visual-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px;
}
.h-photo {
  position: relative;
  flex: none;
  width: clamp(180px, 18vw, 260px);
  margin: 0;
}
/* Bloc signal décalé derrière la photo */
.h-photo::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: var(--h-signal);
}
.h-photo img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--h-paper);
  filter: grayscale(1) contrast(1.05);
}
.h-hero {
  flex: 1 1 260px;
  margin: 0;
  font-family: var(--h-display);
  font-size: clamp(34px, 3.6vw, 64px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--h-paper);
}
.h-hero span { color: var(--h-signal); }

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

/* Elastic pousse le formulaire de 20vh vers le bas : centré dans sa colonne */
body.task-login #login-form {
  position: static !important;
  top: auto !important;
  margin: 0 auto !important;
}