/* LaboMail — couleurs LaboSN (prune #75174C, orange #DF7B25) appliquées au skin Elastic.
   Partie 1 : règles générées depuis skins/elastic/styles/styles.min.css (#37beff/#00acff -> prune), sélecteurs
   préfixés par « html » (sans !important) pour ne battre que les règles d'origine de même niveau. */
html a{color:#8c2460}
html p.image-attachment{background-color:rgba(117,23,76,.05)}
html .quota-widget .value{background-color:#75174c}
html .image-tools{background-color:rgba(117,23,76,.4)}
html .image-tools a:focus,html .image-tools a:hover{background-color:rgba(117,23,76,.5)!important}
html .floating-action-buttons a.button{background:#75174c}
html .btn:focus{box-shadow:0 0 0 .2rem rgba(117,23,76,.3)}
html .btn-link{color:#8c2460}
html .btn-primary{background:#75174c;border-color:#75174c}
html .btn-primary:focus{box-shadow:0 0 0 .2rem rgba(117,23,76,.5)}
html .btn-primary.disabled,html .btn-primary:disabled{background:#75174c;border-color:#75174c}
html .btn-primary:not(:disabled):not(.disabled).active:focus,html .btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(117,23,76,.53)}
html .ui-menu .ui-state-active{background-color:#75174c!important}
html .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus{background-color:rgba(117,23,76,.5)}
html .ui-slider .ui-slider-handle.ui-state-active{background:#75174c}
html .ui-datepicker .ui-datepicker-days-cell-over a,html .ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,html .ui-datepicker .ui-state-highlight,html .ui-datepicker.ui-widget-content .ui-state-highlight{color:#75174c}
html .ui-datepicker a.ui-state-active{background:#75174c!important}
html .popover .menu li a:not(.disabled):hover{background-color:#75174c}
html .popover .menu .dropbutton a.dropdown:hover{background-color:#75174c}
html #taskmenu .action-buttons a{color:#75174c}
html #taskmenu .action-buttons a:hover{color:#75174c}
html .ui.alert{background-color:rgba(117,23,76,.05)}
html .ui.alert a:not(.btn){color:#75174c}
html .ui.alert.boxinformation{background-color:rgba(117,23,76,.2)}
html #messagestack .alert-info.information{background-color:#75174c}
html .popupmenu .listing li>a:not(.disabled):hover{background-color:#75174c}
html .popupmenu .listing li.selected{background-color:#75174c}
html .folderlist li.mailbox .unreadcount{background:#75174c}
html .folderlist li.mailbox.recent>a>.unreadcount{background:#75174c}
html .formcontent.raweditor .CodeMirror-focused{border-color:#75174c;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html .input-group a:focus{background-color:rgba(117,23,76,.25)}
html .multi-input>.content.focused{border-color:#75174c;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html .recipient-input.focus{border-color:#75174c;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html .tagedit-list[tabindex="-1"]{border-color:#75174c;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html .form-control:focus{border-color:#75174c;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html .input-group-text input:focus{border-color:#75174c!important}
html .custom-switch .custom-control-input:focus~.custom-control-label:before{box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html .custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#75174c}
html .custom-switch .custom-control-input:checked~.custom-control-label::before{border-color:#75174c;background-color:#75174c}
html .custom-file-input:focus~.custom-file-label{border-color:#75174c;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html div.tox.focused{border-color:#75174c!important;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)!important}
html div.tox .tox-dialog .tox-dialog__body-nav-item--active{color:#8c2460}
html div.tox .tox-dialog__footer .tox-button{background:#75174c;border-color:#75174c}
html div.tox .tox-dialog__footer .tox-button:focus{box-shadow:0 0 0 .2rem rgba(117,23,76,.5)}
html div.tox .tox-dialog__footer .tox-button.disabled,html div.tox .tox-dialog__footer .tox-button:disabled{background:#75174c;border-color:#75174c}
html div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active:focus,html div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(117,23,76,.53)}
html div.tox .tox-dialog__footer .tox-button:focus:not(:disabled){background:#75174c;border-color:#75174c}
html div.tox .tox-color-input>input:focus,html div.tox .tox-listboxfield .tox-listbox--select:focus,html div.tox .tox-textarea:focus,html div.tox .tox-textfield:focus{border-color:#75174c;box-shadow:0 0 0 .2rem rgba(117,23,76,.25)}
html .googie_list li.googie_list_onhover{background-color:#75174c}
html.dark-mode #taskmenu .action-buttons a{color:#d07aa8}
html.dark-mode .listing li.selected,html.dark-mode .listing li.selected>a,html.dark-mode .listing li.selected>div>a,html.dark-mode .listing tr.selected td{color:#d07aa8}
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status{color:#d07aa8}
html.dark-mode .custom-file-label:focus:not(.is-invalid),html.dark-mode .form-control:focus:not(.is-invalid){border-color:#d07aa8}
html.dark-mode .multi-input:not(.is-invalid)>.content.focused{border-color:#d07aa8}
html.dark-mode .input-group a:focus{border-color:#d07aa8;box-shadow:0 0 0 .2rem rgba(208,122,168,.25)}
html.dark-mode .recipient-input.focus{border-color:#d07aa8}
html.dark-mode .formcontent.raweditor .CodeMirror-focused{border-color:#d07aa8}
html.dark-mode .tox .tox-dialog__body-nav-item--active{color:#d07aa8}
html.dark-mode .tox .tox-collection__item--enabled{color:#d07aa8}
html.dark-mode .ui-datepicker .ui-state-highlight,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight{color:#d07aa8}

/* Partie 3 : barre latérale (sombre dans les deux modes) et accents orange */
html #layout-menu .menu a { color: #d9c4cf; }
html #layout-menu .menu a:hover { color: #fff; }
html #layout-menu .menu a.selected, html #layout-menu .menu a.selected:hover { color: #df7b25; }
.listing li.unread .unreadcount, .listing .unreadcount { background-color: #df7b25 !important; color: #fff !important; }
#layout-menu #logo { max-height: 48px !important; }

/* ===================================================================================
   Partie 2 : page de connexion (refonte 07/11/2026) — panneau givré sans bordure,
   police Plus Jakarta Sans, champs « remplis » sans contour, grand bouton arrondi.
   Fond : photo d'un écran affichant LaboMail (skins/elastic/labomail/fond-connexion*.jpg).
   L'en-tête du panneau, le libellé « Adresse e-mail », le bouton « Se connecter » et l'œil
   du mot de passe sont injectés par labomail.php.
   =================================================================================== */
@font-face { font-family: 'Plus Jakarta Sans'; src: url(../../skins/elastic/labomail/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url(../../skins/elastic/labomail/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-024F, U+20AC; }

body.task-login {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: linear-gradient(rgba(42,9,30,.72), rgba(42,9,30,.82)),
              url(../../skins/elastic/labomail/fond-connexion-mobile.jpg) 25% center / cover no-repeat #3a0c26 !important;
}
body.task-login #layout, body.task-login #layout-content { background: transparent !important; }
body.task-login #layout-content {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 32px 16px 72px; box-sizing: border-box;
}
body.task-login #layout-content > #logo { display: none !important; }

/* Panneau : verre dépoli clair, aucune bordure, ombre très douce */
body.task-login #login-form {
  width: 100%; max-width: 420px; box-sizing: border-box; text-align: left;
  background: rgba(255,255,255,.88) !important; border: 0 !important; border-radius: 28px;
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 40px 90px -30px rgba(18,3,12,.65); padding: 40px 36px 26px !important; margin: 0;
  top: 0 !important; /* Elastic décale le formulaire de 20vh : inutile, il est centré par le flex */
}
.lm-head img { display: block; height: 44px; width: auto; margin: 0 0 30px; }
.lm-head img.lm-dark { display: none; }
.lm-head h1 { margin: 0 0 6px; font-size: 1.85rem; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: #24101c; }
.lm-head p { margin: 0 0 28px; font-size: .97rem; color: #7c6b75; }

/* Champs : fond teinté, pas de contour, icône discrète, anneau prune au focus */
body.task-login #login-form table, body.task-login #login-form tbody,
body.task-login #login-form tr, body.task-login #login-form td.input { display: block; width: 100%; margin: 0; padding: 0; }
body.task-login #login-form .form-group { margin: 0 0 14px !important; }
body.task-login #login-form td.input { position: relative; display: flex; }
body.task-login #login-form .input-group-prepend { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 4; margin: 0; pointer-events: none; }
body.task-login #login-form .input-group-text { background: none !important; border: 0 !important; padding: 0 !important; color: #a8939f !important; font-size: 1rem; min-width: 0; }
body.task-login #login-form .form-control {
  height: 56px; border: 0 !important; border-radius: 16px !important; background: #f3edf1 !important;
  padding: 0 52px 0 50px !important; font: 500 1rem 'Plus Jakarta Sans', system-ui, sans-serif; color: #24101c;
  box-shadow: none !important; transition: background .2s, box-shadow .2s;
}
body.task-login #login-form .form-control::placeholder { color: #9d8a95; font-weight: 400; opacity: 1; }
body.task-login #login-form .form-control:hover { background: #efe6ec !important; }
body.task-login #login-form .form-control:focus { background: #fff !important; box-shadow: 0 0 0 2px #8c2460, 0 0 0 6px rgba(140,36,96,.14) !important; }
body.task-login #login-form td.input:focus-within .input-group-text { color: #8c2460 !important; }
.lm-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 4; width: 38px; height: 38px; border: 0; border-radius: 12px;
  background: transparent; color: #9d8a95; display: grid; place-items: center; cursor: pointer; padding: 0; }
.lm-eye:hover { background: rgba(140,36,96,.08); color: #8c2460; }
.lm-eye svg { width: 20px; height: 20px; }
.lm-eye .off { display: none; } .lm-eye.on .on { display: none; } .lm-eye.on .off { display: block; }

/* Bouton : pleine largeur, très arrondi, dégradé prune, survol orange */
body.task-login .formbuttons { margin: 22px 0 0 !important; }
body.task-login #rcmloginsubmit {
  height: 56px; width: 100%; border: 0 !important; border-radius: 16px !important;
  background: linear-gradient(135deg, #8c2460, #5a1139) !important; color: #fff !important;
  font: 700 1.02rem 'Plus Jakarta Sans', system-ui, sans-serif; text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: 0 16px 30px -14px rgba(140,36,96,.85) !important; transition: transform .15s, box-shadow .2s, background .2s;
}
body.task-login #rcmloginsubmit::after { content: '  →'; font-weight: 600; }
body.task-login #rcmloginsubmit:hover { background: linear-gradient(135deg, #e8893a, #c4620f) !important; box-shadow: 0 18px 32px -14px rgba(223,123,37,.9) !important; transform: translateY(-1px); }
body.task-login #rcmloginsubmit:active { transform: translateY(0); }
body.task-login #rcmloginsubmit:focus-visible { outline: 3px solid rgba(223,123,37,.55); outline-offset: 3px; }

body.task-login #login-footer { margin-top: 22px; text-align: center; font-size: .85rem; }
body.task-login #login-footer, body.task-login #login-footer * { color: #9a8893 !important; }
body.task-login #login-footer a { color: #8c2460 !important; font-weight: 600; text-decoration: none; }
body.task-login #login-footer a:hover { text-decoration: underline; }
#labomail-footer { position: fixed; left: 0; right: 0; bottom: 18px; text-align: center; font: 400 .82rem 'Plus Jakarta Sans', system-ui, sans-serif; }
#labomail-footer, #labomail-footer strong { color: rgba(255,255,255,.78) !important; }
#labomail-footer a, #labomail-footer a:hover { color: #ffb46b !important; font-weight: 700; text-decoration: none; }

/* Messages d'erreur (identifiants invalides…) arrondis eux aussi */
body.task-login #messagestack .ui.alert, body.task-login #messagestack div { border-radius: 14px; }

/* Grand écran : l'écran de la photo reste visible à gauche, le panneau se place à droite */
@media (min-width: 1100px) {
  body.task-login {
    background: linear-gradient(90deg, rgba(40,8,27,0) 0%, rgba(40,8,27,.12) 45%, rgba(58,12,38,.78) 70%, rgba(42,9,30,.92) 100%),
                url(../../skins/elastic/labomail/fond-connexion.jpg) left center / cover no-repeat #3a0c26 !important;
  }
  body.task-login #layout-content { align-items: flex-end; padding-right: 8vw; }
}
@media (max-width: 480px) {
  body.task-login #login-form { padding: 32px 22px 22px !important; border-radius: 24px; }
  .lm-head h1 { font-size: 1.6rem; }
}

/* Mode sombre */
html.dark-mode body.task-login #login-form { background: rgba(30,20,27,.84) !important; }
html.dark-mode .lm-head img.lm-light { display: none; } html.dark-mode .lm-head img.lm-dark { display: block; }
html.dark-mode .lm-head h1 { color: #fff; } html.dark-mode .lm-head p { color: #cdb9c4; }
html.dark-mode body.task-login #login-form .form-control { background: rgba(255,255,255,.08) !important; color: #fff; }
html.dark-mode body.task-login #login-form .form-control:focus { background: rgba(255,255,255,.12) !important; }
html.dark-mode body.task-login #login-footer a { color: #ffb46b !important; }

/* ===================================================================================
   Partie 4 : intérieur du webmail (08/11/2026) — même langage que la page de connexion :
   Plus Jakarta Sans, navigation prune profond, bouton « Rédiger » orange, dossiers et messages en pilules,
   sélection prune, barres d'outils légères, champs arrondis, texte des messages en police proportionnelle.
   =================================================================================== */
html body:not(.task-login), html body:not(.task-login) .popupmenu, html body:not(.task-login) .ui-dialog {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Colonne de navigation */
html #layout-menu { background: linear-gradient(180deg, #3a0c26 0%, #24101c 100%); }
html #layout-menu .popover-header, html #layout-menu .special-buttons { background: transparent !important; }
html #layout-menu .menu a { border-radius: 12px; margin: 2px 8px; width: auto; font-size: .78rem; font-weight: 600; transition: background .15s, color .15s; }
html #layout-menu .menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
html #layout-menu .menu a.selected, html #layout-menu .menu a.selected:hover { background: rgba(255,255,255,.12); color: #ffb46b; }
html #layout-menu .menu a.compose { background: #df7b25; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(223,123,37,.9); margin-bottom: 10px; }
html #layout-menu .menu a.compose:hover { background: #e8893a; }
html #layout-menu .menu a.logout { color: #ff8f8f; }

/* En-têtes et barres d'outils */
html:not(.dark-mode) #layout-content > .header, html:not(.dark-mode) #layout-list > .header, html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #layout-content > .footer, html:not(.dark-mode) #layout-list > .footer, html:not(.dark-mode) #layout-sidebar > .footer { background: #fff !important; border-color: #f0e8ed !important; }
html .header .header-title, html .header .header-title a { font-weight: 700; letter-spacing: -.01em; }
html .toolbar a.button, html .toolbar .button { border-radius: 10px; font-weight: 600; transition: background .15s, color .15s; }
html:not(.dark-mode) .toolbar a.button:hover:not(.disabled), html:not(.dark-mode) .toolbar .button:hover:not(.disabled) { background: #f6eef2; color: #75174c; }

/* Dossiers */
html:not(.dark-mode) #layout-sidebar { background: #faf7f9; }
html:not(.dark-mode) #layout-sidebar > .header, html:not(.dark-mode) #layout-sidebar > .footer { background: #faf7f9 !important; border-color: transparent !important; }
html #mailboxlist li, html #layout-sidebar .listing li { border: 0 !important; }
html #mailboxlist li a, html #layout-sidebar .listing li a { border-radius: 12px; margin: 2px 10px; width: auto !important; font-weight: 500; }
/* Compteur de non-lus calé DANS la pilule (il se plaçait sur la ligne entière et débordait), place pour la flèche
   des sous-dossiers à gauche (08/11/2026) */
html #mailboxlist li a { position: relative; margin: 2px 6px 2px 24px !important; padding-right: 40px !important; font-size: .93rem; }
html #mailboxlist li a .unreadcount { right: 10px !important; }
html #mailboxlist li .treetoggle { left: 2px; }
html:not(.dark-mode) #mailboxlist li a:hover, html:not(.dark-mode) #layout-sidebar .listing li a:hover { background: #f1e7ed; }
html:not(.dark-mode) #mailboxlist li.selected > a, html:not(.dark-mode) #layout-sidebar .listing li.selected > a { background: #75174c; color: #fff !important; font-weight: 700; }
html:not(.dark-mode) #mailboxlist li.selected > a:before, html:not(.dark-mode) #mailboxlist li.selected .unreadcount { color: #fff; }
html #mailboxlist .unreadcount, .listing li .unreadcount { border-radius: 999px !important; font-weight: 700; }

/* Recherche */
html .searchbar input, html #layout-list .header .searchbar input { border-radius: 10px; }
html:not(.dark-mode) .searchbar { background: #f6f1f4; border-radius: 12px; margin: 6px 8px; }

/* Liste des messages */
html:not(.dark-mode) #layout-list { background: #fff; }
html #messagelist tbody tr td { border-bottom: 0 !important; }
html #messagelist tbody tr { border-bottom: 1px solid #f3ecf0; }
html #messagelist tbody tr td.subject { padding-top: 10px; padding-bottom: 10px; }
html:not(.dark-mode) #messagelist tbody tr:hover td { background: #fbf7fa; }
html:not(.dark-mode) #messagelist tbody tr.selected td, html:not(.dark-mode) #messagelist tbody tr.focused.selected td { background: #f6eef2 !important; }
html #messagelist tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 #75174c; }
html #messagelist tbody tr.unread td.subject span.subject a { font-weight: 800; }
html #messagelist tbody tr td.subject span.fromto { font-weight: 600; }
html #messagelist tbody tr td.subject span.date { font-size: .78rem; }
html #messagelist tbody tr.unread td.subject .msgicon.status:before { color: #df7b25; }

/* Lecture d'un message */
html #layout-content .header-headers h2.subject, html #message-header h2.subject { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
html #messagebody div.message-part pre, html #messagebody .pre {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: .95rem; line-height: 1.65;
}
html #messagebody div.message-part pre { white-space: pre-wrap; }
html #message-header .contactphoto { border-radius: 50%; }

/* Rédaction et réglages : champs et boutons arrondis */
html body:not(.task-login) .form-control, html body:not(.task-login) .custom-select, html body:not(.task-login) .recipient-input {
  border-radius: 10px;
}
html body:not(.task-login) .btn { border-radius: 10px; font-weight: 600; }
html body:not(.task-login) .btn-primary, html body:not(.task-login) .mainaction { border-radius: 12px; box-shadow: 0 10px 22px -14px rgba(117,23,76,.9); }
html #compose-attachments, html .compose-attachments, html #layout-sidebar .attachmentslist { border-radius: 14px; }
html:not(.dark-mode) #layout-content .formcontent, html:not(.dark-mode) .propform fieldset { border-radius: 14px; }
html .ui-dialog { border-radius: 16px; overflow: hidden; }
html .popupmenu { border-radius: 12px; }

/* ===================================================================================
   Partie 5 (08/11/2026) : l'intérieur reprend la maquette affichée sur l'écran de l'iMac
   (sources/fond-connexion/boite-maquette.html) — grands écrans, mode clair uniquement.
   =================================================================================== */
@media (min-width: 1024px) {
  /* Une seule colonne prune : navigation + dossiers */
  html:not(.dark-mode) #layout-menu, html:not(.dark-mode) #layout-sidebar {
    background: linear-gradient(170deg, #7a1a52 0%, #4a1239 100%) !important; border: 0 !important;
  }
  html:not(.dark-mode) #layout-sidebar { border-left: 1px solid rgba(255,255,255,.08) !important; }
  html:not(.dark-mode) #layout-sidebar > .header {
    background: #fff url(../../skins/elastic/labomail/logo-login.png?v=3) 18px center / auto 30px no-repeat !important;
    margin: 18px 14px 14px; height: 60px; border-radius: 14px; border: 0 !important; box-shadow: 0 10px 24px -14px rgba(0,0,0,.5);
  }
  html:not(.dark-mode) #layout-sidebar > .header .header-title { font-size: 0 !important; color: transparent !important; }
  html:not(.dark-mode) #layout-sidebar > .header a.sidebar-menu:before { color: #75174c; }
  html:not(.dark-mode) #layout-sidebar > .footer { background: transparent !important; border: 0 !important; color: #f3dfe9; }
  html:not(.dark-mode) #layout-sidebar > .footer * { color: #f3dfe9 !important; }
  html:not(.dark-mode) #layout-sidebar > .footer .bar { background: rgba(255,255,255,.18) !important; }
  html:not(.dark-mode) #mailboxlist li a, html:not(.dark-mode) #mailboxlist li a:before, html:not(.dark-mode) #mailboxlist li .treetoggle { color: #f6e4ee !important; }
  html:not(.dark-mode) #mailboxlist li a:hover { background: rgba(255,255,255,.10) !important; }
  html:not(.dark-mode) #mailboxlist li.selected > a { background: rgba(255,255,255,.16) !important; color: #fff !important; font-weight: 700; }
  html:not(.dark-mode) #mailboxlist li.selected > a:before { color: #fff !important; }
  html:not(.dark-mode) #mailboxlist .unreadcount { background: #df7b25 !important; color: #fff !important; }
  html:not(.dark-mode) #layout-menu .menu a.selected, html:not(.dark-mode) #layout-menu .menu a.selected:hover { background: rgba(255,255,255,.16); }

  /* Liste des messages : fond rose pâle, grand titre, recherche blanche */
  html:not(.dark-mode) #layout-list, html:not(.dark-mode) #layout-list > .header, html:not(.dark-mode) #layout-list > .footer { background: #fcf8fa !important; }
  html:not(.dark-mode) #layout-list > .header { border-bottom: 0 !important; }
  html:not(.dark-mode) #layout-list .searchbar { background: #fff !important; border: 1px solid #eadfe6; margin: 4px 18px 10px; border-radius: 10px; }
  html:not(.dark-mode) #messagelist tbody tr td { background: #fcf8fa; }
  html:not(.dark-mode) #messagelist tbody tr { border-bottom: 1px solid #f0e6ec; }
  html:not(.dark-mode) #messagelist tbody tr:hover td { background: #fff; }
  html:not(.dark-mode) #messagelist tbody tr.selected td, html:not(.dark-mode) #messagelist tbody tr.focused.selected td { background: #fff !important; }
  html:not(.dark-mode) #messagelist tbody tr.selected td:first-child { box-shadow: inset 4px 0 0 #8c2460; }
  html:not(.dark-mode) #messagelist tbody tr.unread td.subject span.fromto, html:not(.dark-mode) #messagelist tbody tr.unread td.subject span.subject a { color: #1d141c; font-weight: 800; }
  html:not(.dark-mode) #messagelist tbody tr td.subject span.date { color: #9a8b95; }

  /* Lecture : boutons d'action en pilules contournées, à l'horizontale */
  html:not(.dark-mode) #layout-content > .header .toolbar a.button, html:not(.dark-mode) #layout-content > .header .toolbar .button {
    display: inline-flex !important; flex-direction: row; align-items: center; gap: 6px; height: 38px; min-width: 0;
    margin: 0 4px; padding: 0 13px !important; border: 1px solid #eadfe6; border-radius: 9px; color: #6a5d67; font-size: .82rem;
  }
  html:not(.dark-mode) #layout-content > .header .toolbar a.button:before { margin: 0; font-size: .95rem; line-height: 1; float: none; height: auto; }
  html:not(.dark-mode) #layout-content > .header .toolbar a.button .inner { display: inline; }
  html:not(.dark-mode) #layout-content > .header .toolbar a.button:hover { background: #fbf2f7; color: #75174c; border-color: #d9c4cf; }
}

/* Contenu du message (cadre intérieur) : grand sujet prune, avatar rond prune */
html:not(.dark-mode) #message-header h2.subject { font-size: 1.7rem !important; font-weight: 800; letter-spacing: -.02em; color: #521840; }
html:not(.dark-mode) #message-header img.contactphoto { border-radius: 50%; background: #8c2460; }
/* Partie 5, ajustements (v2, mesurés) */
@media (min-width: 1024px) {
  html:not(.dark-mode) #layout-sidebar > .header { background-position: 16px center !important; background-size: auto 22px !important; position: relative; }
  html:not(.dark-mode) #layout-sidebar > .header a.sidebar-menu { position: absolute; right: 6px; top: 0; }
  html:not(.dark-mode) #messagelist-header #toolbar-list-menu a .inner, html:not(.dark-mode) #messagelist-header a.refresh .inner { display: none !important; }
  html:not(.dark-mode) #messagelist-header #toolbar-list-menu li a, html:not(.dark-mode) #messagelist-header a.refresh { min-width: 38px !important; width: 38px !important; padding: 0 !important; }
  html:not(.dark-mode) #messagelist tbody tr.selected td.subject { box-shadow: inset 4px 0 0 #8c2460; }
  html:not(.dark-mode) #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large) {
    display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 6px; height: 36px !important;
    min-width: 0 !important; margin: 11px 3px 0 !important; padding: 0 12px !important; border: 1px solid #eadfe6 !important;
    border-radius: 9px !important; color: #6a5d67 !important; font-size: .8rem !important; line-height: 1 !important;
  }
  html:not(.dark-mode) #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large):before { position: static !important; margin: 0 !important; font-size: .92rem !important; line-height: 1 !important; height: auto !important; width: auto !important; }
  html:not(.dark-mode) #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large) .inner { display: inline !important; position: static !important; }
  html:not(.dark-mode) #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large):hover { background: #fbf2f7 !important; color: #75174c !important; border-color: #d9c4cf !important; }
}
@media (min-width: 1024px) {
  /* « Répondre à… » et « Transférer » : la pilule est le span.dropbutton (bouton + flèche) */
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton {
    display: inline-flex !important; align-items: center; height: 36px; margin: 11px 3px 0; padding: 0 2px 0 10px;
    border: 1px solid #eadfe6; border-radius: 9px; box-sizing: border-box;
  }
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton > a:first-child {
    display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 6px; height: 34px !important;
    min-width: 0 !important; padding: 0 2px !important; color: #6a5d67 !important; font-size: .8rem !important; line-height: 1 !important;
  }
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton > a:first-child:before { position: static !important; margin: 0 !important; font-size: .92rem !important; line-height: 1 !important; height: auto !important; width: auto !important; }
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton > a:first-child .inner { display: inline !important; position: static !important; }
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton > a.dropdown { height: 34px !important; width: 22px !important; min-width: 0 !important; padding: 0 !important; }
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton:hover { background: #fbf2f7; border-color: #d9c4cf; }
}
@media (min-width: 1024px) {
  html:not(.dark-mode) #toolbar-menu a .inner { max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
}
@media (min-width: 1024px) {
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton > a:first-child, html:not(.dark-mode) #toolbar-menu > li > span.dropbutton > a:first-child .inner { max-width: none !important; width: auto !important; overflow: visible !important; }
}
/* Écrans moyens (portables) : pilules d'action en icônes seules, libellé en info-bulle, pour que tout tienne */
@media (min-width: 1024px) and (max-width: 1365px) {
  html:not(.dark-mode) #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large) .inner,
  html:not(.dark-mode) #toolbar-menu > li > span.dropbutton > a:first-child .inner { display: none !important; }
  html:not(.dark-mode) #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large) { padding: 0 11px !important; }
}
/* Colonne prune : toutes ses listes en texte clair (Paramètres, Contacts…), sauf en rédaction où elle reste claire */
@media (min-width: 1024px) {
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li a,
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li a:before,
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li .treetoggle,
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li a .name { color: #f6e4ee !important; }
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li a:hover { background: rgba(255,255,255,.10) !important; }
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li.selected > a { background: rgba(255,255,255,.16) !important; color: #fff !important; }
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li.selected > a:before { color: #fff !important; }
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .boxtitle, html:not(.dark-mode) body:not(.action-compose) #layout-sidebar h2,
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .header-title { color: #f3dfe9; }
  html:not(.dark-mode) body.action-compose #layout-sidebar { background: #fff !important; }
  html:not(.dark-mode) body.action-compose #layout-sidebar > .header { background: #fff !important; margin: 0; height: auto; border-radius: 0; box-shadow: none; }
}
@media (min-width: 1024px) {
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li,
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li.selected,
  html:not(.dark-mode) body:not(.action-compose) #layout-sidebar .listing li.focused { background: transparent !important; }
}

/* Rédaction (08/11/2026) : options d'envoi masquées (accusés, format, priorité, dossier des envoyés : valeurs par défaut,
   toujours envoyées avec le formulaire) ; colonne de droite réduite aux pièces jointes, l'éditeur gagne la place. */
body.action-compose #compose-options { display: none !important; }
@media (min-width: 1024px) {
  body.action-compose #layout-sidebar.sidebar-right { width: 280px !important; min-width: 280px !important; max-width: 280px !important; flex: 0 0 280px !important; }
  body.action-compose #layout-sidebar > .header .header-title { font-size: 0 !important; }
  body.action-compose #layout-sidebar > .header .header-title:after { content: "Pièces jointes"; font-size: 1rem; font-weight: 700; }
  body.action-compose #compose-attachments { margin: 14px !important; border-radius: 14px; }
  body.action-compose #compose-attachments .upload-form { padding: 18px 12px !important; }
}
@media (min-width: 1024px) {
  html body.action-compose #layout-sidebar > .header .header-title { font-size: 0 !important; color: transparent !important; }
  html body.action-compose #layout-sidebar > .header .header-title:after { color: #24101c; font-size: 1rem; font-weight: 700; }
  html.dark-mode body.action-compose #layout-sidebar > .header .header-title:after { color: #f3eaf0; }
}

/* ===== Partie 6 (08/11/2026) — Lecture : en-têtes toujours en détail (De / À / Cc / Date),
   liens « Détails / Résumé », « En-têtes » et « Texte brut » retirés (demande utilisateur). ===== */
html #message-header .header-content .header-summary { display: none !important; }
html #message-header .header-content .header-headers { display: initial !important; }
html #message-header .header-links { display: none !important; }