/* =========================================================================
   BDC Academy — habillage du webmail. « Elastic2025 BDC Edition ».

   TROIS COUCHES, dans cet ordre :

     1. skins/elastic/        le skin officiel de Roundcube
     2. skins/elastic2025/    le fork « façon Gmail » (amont, intouché,
                              remis d'aplomb par outils/patcher-elastic2025.mjs)
     3. skins/bdc/            CE FICHIER — la marque, et rien d'autre

   Aucune copie : on importe, on redéfinit nos écarts. Une mise à jour de
   Roundcube ou du fork n'exige aucune recompilation. Et si Elastic2025
   devient un jour une charge, il suffit de changer UNE ligne — le
   `@import` ci-dessous et `extends` dans meta.json — pour retomber sur
   Elastic sans réécrire la marque.

   Palette : gris strictement neutres (R = V = B), identique au site.
   Aucune couleur d'accent : la marque est monochrome.
   ========================================================================= */

@import url("../../elastic2025/styles/styles.min.css");

/* ------------------------------------------------------------- Typographie */
/* Les fichiers du site : le webmail sort dans la typo de la marque, pas dans
   le Roboto d'Elastic2025. */

@font-face { font-family: 'Poppins'; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url("../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url("../fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aloevera Display'; src: url("../fonts/aloevera-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aloevera Display'; src: url("../fonts/aloevera-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ==========================================================================
   1. LA PALETTE
   Elastic2025 pilote presque tout par dix variables. On les remappe : c'est
   le point d'entrée le moins invasif, et il survit aux mises à jour du fork
   tant que ces noms existent.
   ========================================================================== */

html {
  --font:                    #0a0b0c;   /* encre — texte principal */
  --font2:                   #585858;   /* secondaire, lisible (~4,6:1) */
  --background:              #ffffff;
  --backgroundhover:         #e0e0e0;   /* était un bleu pâle (#CDE6F7) */
  --backgroundhoverlight:    #f2f2f2;   /* était #E6F2FA */
  --backgroundtree:          #efefef;   /* barre latérale */
  --backgroundbutton:        #f2f2f2;
  --backgroundcompose:       #efefef;   /* boutons À / Cc / Cci */
  --backgroundcomposehover:  #e0e0e0;
  --bordercolor:             #e0e0e0;

  /* Nos propres jetons, pour les règles qui ne passent pas par le fork. */
  --bdc-ink:      #0a0b0c;
  --bdc-ink-2:    #3c3c3c;
  --bdc-muted:    #585858;
  --bdc-muted-2:  #8c8c8c;
  --bdc-line:     #e0e0e0;
  --bdc-soft:     #f2f2f2;
  --bdc-panel:    #efefef;
  --bdc-sombre:   #1e1e1e;
  --bdc-sans:  'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bdc-serif: 'Aloevera Display', 'Poppins', system-ui, sans-serif;
}

html.dark-mode {
  --font:                    #ededed;
  --font2:                   #b3b3b3;
  --background:              #121212;
  --backgroundhover:         #2a2a2a;
  --backgroundhoverlight:    #242424;
  --backgroundtree:          #1c1c1c;
  --backgroundbutton:        #2f2f2f;
  --backgroundcompose:       #2f2f2f;
  --backgroundcomposehover:  #3d3d3d;
  --bordercolor:             #3a3a3a;   /* était bleuté (#3D444D) */
}

/* On vise html/body et les éléments de formulaire, jamais `*` : les icônes
   d'Elastic sont des pseudo-éléments en `font-family: Icons`, qu'un sélecteur
   universel transformerait en carrés vides. */
html, body,
input, select, textarea, button,
.propform, .listing, .messagelist, .popupmenu, .menu, .toolbar, .header {
  font-family: var(--bdc-sans);
}

/* TinyMCE impose Roboto en !important : seul endroit où il faut répondre
   avec la même arme. */
div.tox .tox-color-input > input,
div.tox .tox-listboxfield .tox-listbox--select,
div.tox .tox-textarea,
div.tox .tox-textfield { font-family: var(--bdc-sans) !important; }

/* ==========================================================================
   2. LES FUITES DU MODE SOMBRE
   Elastic2025 est développé en sombre. Douze fonds quasi noirs y sont écrits
   EN DUR, hors du scope `html.dark-mode` : en thème clair, la liste des
   messages sortait en noir entre une barre latérale claire et un volet de
   lecture blanc. C'est le défaut le plus visible du fork ; sans ces règles,
   l'habillage BDC ne sert à rien.
   ========================================================================== */

html:not(.dark-mode) #messagelist-header { background-color: var(--bdc-soft) !important; }
html:not(.dark-mode) #messagelist-content { background-color: #ffffff; }
html:not(.dark-mode) .searchbar input { background-color: var(--bdc-soft); color: var(--bdc-ink); }

html:not(.dark-mode) .messagelist tr.unread,
html:not(.dark-mode) .message:hover,
html:not(.dark-mode) #folderlist-content a:hover,
html:not(.dark-mode) table.settings-default-icon tr:hover,
html:not(.dark-mode) #identities-table tr td.mail:hover { background-color: var(--bdc-soft); }

html:not(.dark-mode) .divscale_default { background-color: var(--bdc-line); }
html:not(.dark-mode) .sel_circle { background-color: var(--bdc-muted); }
html:not(.dark-mode) #rcmdraglayer { background-color: var(--bdc-ink); color: #ffffff; }

/* Non lu : c'est la GRAISSE qui doit le dire, pas un aplat. Sur fond blanc,
   un aplat gris pour « non lu » et un autre pour « survol » se confondent. */
html:not(.dark-mode) .messagelist tr.unread { background-color: transparent; }
.messagelist tr.unread td.subject,
.messagelist tr.unread td.fromto { font-weight: 600; color: var(--bdc-ink); }

/* ==========================================================================
   3. LES RESTES DE BLEU
   La marque est monochrome. Partout où le fork pose un bleu, on pose du gris
   neutre ou de l'encre.
   ========================================================================== */

.minicompose_header_left div:hover,
.minicompose_header_right div:hover,
.minicompose_reduced2 .minicompose_header:hover { background-color: var(--bdc-line); }

.powered-by a { color: var(--bdc-muted); }

a, .listing li a:hover, .menu.listing a:hover { color: var(--bdc-ink); }

::selection { background: var(--bdc-line); color: var(--bdc-ink); }
:focus-visible { outline: 2px solid var(--bdc-muted); outline-offset: 2px; }

/* ==========================================================================
   4. LE BOUTON « RÉDIGER »
   Le geste principal de l'interface. Elastic2025 le pose en blanc sur gris
   clair — il ne se distingue pas du reste. On reprend le bouton du site :
   aplat d'encre, texte clair, pilule.
   ========================================================================== */

.compose.button div {
  background-color: var(--bdc-ink);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.compose.button div:hover { background-color: var(--bdc-sombre); color: #ffffff; }
.compose.button div .composeicon, .compose.button div i { color: #ffffff; }

html.dark-mode .compose.button div { background-color: #ededed; color: #0a0b0c; }
html.dark-mode .compose.button div:hover { background-color: #ffffff; color: #0a0b0c; }
html.dark-mode .compose.button div .composeicon,
html.dark-mode .compose.button div i { color: #0a0b0c; }

/* ==========================================================================
   5. LA PAGE DE CONNEXION
   Elastic2025 ne l'habille qu'a minima : il a perdu les groupes d'input
   d'Elastic et laisse des champs et un bouton natifs. C'est le PREMIER écran
   que voit la cliente — il porte seul la première impression.
   ========================================================================== */

/* Le gabarit de connexion appartient au fork et y code son logo en dur. Le
   dupliquer imposerait de le resynchroniser à chaque version ; `content:
   url(…)` remplace l'image affichée sans toucher au gabarit, et l'attribut
   `alt` reste intact. */
.task-login #logo { content: url("../images/logo.svg"); max-height: 64px; width: auto; }
html.dark-mode .task-login #logo { content: url("../images/logo-dark.svg"); opacity: 1; }

.task-login #layout-content { background: #ffffff; }
html.dark-mode .task-login #layout-content { background: #121212; }

#login-form { max-width: 340px; }

#login-form td, #login-form th { padding: 0; }
#login-form input.form-control {
  width: 100%;
  height: 46px;
  padding: 0 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--bdc-line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--bdc-ink);
  font-size: 0.95rem;
}
#login-form input.form-control:focus {
  border-color: var(--bdc-ink);
  box-shadow: none;
  outline: none;
}
#login-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bdc-muted);
  text-align: left;
}
#rcmloginsubmit, #login-form button[type="submit"] {
  width: 100%;
  height: 48px;
  margin-top: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--bdc-ink);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
#rcmloginsubmit:hover, #login-form button[type="submit"]:hover { background: var(--bdc-sombre); }

html.dark-mode #login-form input.form-control { background: #1c1c1c; border-color: #3a3a3a; color: #ededed; }
html.dark-mode #rcmloginsubmit { background: #ededed; color: #0a0b0c; }

/* ==========================================================================
   6. LA SIGNATURE DU FORK
   « Powered by RC & Binaee.com », en bas de la barre latérale. La licence
   d'Elastic2025 (CC BY-SA 3.0) demande de conserver les crédits « in the
   README file » — ils y sont, ainsi que dans meta.json. L'interface d'une
   cliente n'est pas le bon endroit pour la signature de trois éditeurs.
   ========================================================================== */

.powered-by { display: none; }

/* ==========================================================================
   7. DÉTAILS
   ========================================================================== */

/* PAS d'Aloevera dans le chrome de l'application. Une police display dans des
   libellés, des boutons ou des données, c'est le tell d'une interface habillée
   plutôt que conçue : la lisibilité passe avant la signature. Aloevera reste
   la voix de la marque là où la marque parle — l'écran de connexion — et
   Poppins porte toute l'interface de travail. */
h1, h2, h3, .header-title { font-family: var(--bdc-sans); font-weight: 600; letter-spacing: -0.005em; }

/* Filets : Elastic2025 les pose en bleuté clair. */
#layout-sidebar, #layout-list { border-color: var(--bdc-line); }

/* Barre de quota : neutre, pas bleue. */
#quotadisplay .bar, .quota_bar .quota_used { background-color: var(--bdc-muted); }

/* ==========================================================================
   8. L'ENCRE BLEUTÉE DU FORK
   Elastic2025 écrit son texte en `#2c363a` — un gris BLEUTÉ (B 58 > R 44),
   posé EN DUR dans une trentaine de règles plutôt que via `var(--font)`.
   Remapper la variable ne les atteint donc pas. La charte BDC impose des
   gris strictement neutres (R = V = B) : on rejoue les mêmes règles avec
   notre encre. La hiérarchie visuelle est intacte, la dominante froide s'en va.
   ========================================================================== */

html:not(.dark-mode) .listing li a,
html:not(.dark-mode) .listing tbody td,
html:not(.dark-mode) .listing tbody td a,
html:not(.dark-mode) .menu.listing a,
html:not(.dark-mode) .menu.pagenav a,
html:not(.dark-mode) .menu .buttons button,
html:not(.dark-mode) .form-control,
html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .input-group-text,
html:not(.dark-mode) .recipient-input a.button.icon,
html:not(.dark-mode) .attachmentslist li .attachment-name,
html:not(.dark-mode) .formcontent.raweditor .CodeMirror,
html:not(.dark-mode) .ui.alert,
html:not(.dark-mode) .ui-dialog .ui-dialog-title,
html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar-close,
html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link,
html:not(.dark-mode) .ui-datepicker .ui-datepicker-next,
html:not(.dark-mode) .ui-datepicker .ui-datepicker-prev,
html:not(.dark-mode) .ui-datepicker .ui-state-default,
html:not(.dark-mode) div.tox .tox-dialog__title,
html:not(.dark-mode) div.tox .tox-label,
html:not(.dark-mode) div.tox .tox-dialog__header .tox-button { color: var(--bdc-ink); }

html:not(.dark-mode) div.tox .tox-dialog__footer .tox-button { color: var(--bdc-ink) !important; }
html:not(.dark-mode) .html-editor .editor-toolbar .mce-i-html { color: var(--bdc-ink); }

/* Désactivé / supprimé : même encre, en retrait. */
html:not(.dark-mode) .listing li.disabled,
html:not(.dark-mode) .listing tr.disabled td,
html:not(.dark-mode) .messagelist tr.deleted td,
html:not(.dark-mode) table.table tr.deleted td { color: rgba(10, 11, 12, 0.42) !important; }

html:not(.dark-mode) #messagestack div { background-color: var(--bdc-ink); }
html:not(.dark-mode) .ui-widget-overlay,
html:not(.dark-mode) div.tox .tox-dialog-wrap__backdrop { background-color: rgba(10, 11, 12, 0.5); }

/* ==========================================================================
   9. LA LIGNE DE MESSAGE
   Le fork affiche l'expéditeur d'un message LU en `#c2c2c2` : lisible en
   blanc sur sombre, invisible sur blanc (≈ 1,6:1). C'est la fuite la plus
   coûteuse du lot — l'expéditeur est l'information qu'on lit en premier.

   Hiérarchie voulue, celle de Gmail : expéditeur d'abord, objet ensuite,
   date en retrait. Le non-lu se dit par la graisse, pas par un aplat.
   ========================================================================== */

html:not(.dark-mode) .messagelist span.fromto,
html:not(.dark-mode) .messagelist span.fromto .rcmContactAddress { color: var(--bdc-ink-2); }

html:not(.dark-mode) .messagelist tr.unread span.fromto,
html:not(.dark-mode) .messagelist tr.unread span.fromto .rcmContactAddress {
  color: var(--bdc-ink);
  font-weight: 600;
}

html:not(.dark-mode) .messagelist td.subject { color: var(--bdc-muted); }
html:not(.dark-mode) .messagelist tr.unread td.subject { color: var(--bdc-ink); }

/* Date et taille : repères, pas titres. Le fork les met en gras encre. */
html:not(.dark-mode) .messagelist span.date,
html:not(.dark-mode) .messagelist span.size {
  color: var(--bdc-muted-2);
  font-weight: 400;
}
html:not(.dark-mode) .messagelist tr.unread span.date { color: var(--bdc-ink-2); font-weight: 500; }

/* Ligne sélectionnée : un aplat gris clair, jamais de bleu système. */
html:not(.dark-mode) .messagelist tr.selected,
html:not(.dark-mode) .messagelist tr.focused { background-color: var(--bdc-soft); }

/* Le rond de sélection reçoit son bleu (#0078d4) en style INLINE, posé par
   le JavaScript du fork. Une règle CSS ordinaire ne peut pas l'emporter :
   `!important` est ici la seule réponse possible, pas un raccourci. */
html:not(.dark-mode) .sel_circle.maillogo_is_select { background-color: var(--bdc-ink) !important; }
html:not(.dark-mode) .sel_circle.maillogo_no_select { background-color: var(--bdc-line); }

/* ==========================================================================
   10. CORRECTIF — GROUPES D'INPUT DE LA CONNEXION
   Elastic pose une icône en préfixe (`span.input-group-prepend`) dans une
   cellule en `display: flex`. Passer l'input à `width: 100%` la chassait
   au-dessus du champ. La marque n'a pas besoin de ces pictogrammes : les
   deux champs portent déjà leur intitulé en indication.
   ========================================================================== */

#login-form .input-group-prepend { display: none; }
#login-form td.input { display: block; width: 100%; }

/* ==========================================================================
   11. LES DEUX BOUTONS DE L'ÉCRAN D'ÉCRITURE
   « Envoyer » restait en bleu Elastic (#37beff) et « Joindre » en gris
   bleuté : ce sont les deux seuls aplats colorés que le fork ne fait pas
   passer par ses variables. Envoyer est l'action principale — il prend
   l'encre, comme le bouton du site.
   ========================================================================== */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
button.sendmain,
button.sendmain:hover,
.floating-action-buttons a.button {
  background-color: var(--bdc-ink);
  border-color: var(--bdc-ink);
  color: #ffffff;
}
button.sendmain:hover, .btn-primary:hover { background-color: var(--bdc-sombre); border-color: var(--bdc-sombre); }

.btn-secondary, .btn-secondary:hover, button.attach, button.attach:hover {
  background-color: var(--bdc-panel);
  border-color: var(--bdc-line);
  color: var(--bdc-ink);
}
.btn-secondary:hover, button.attach:hover { background-color: var(--bdc-line); }

html.dark-mode .btn-primary,
html.dark-mode button.sendmain { background-color: #ededed; border-color: #ededed; color: #0a0b0c; }

/* ==========================================================================
   12. LA FENÊTRE DE RÉDACTION
   Elastic2025 la pose en pixels fixes : 600 × 620, marge haute de −620 px,
   état réduit décalé par `translate(0, 585px)`, conteneur large de 8000 px.
   Chaque valeur suppose les autres. Réduire la fenêtre du navigateur sous
   620 px de haut, et la fenêtre sortait de l'écran.

   Ici tout est relatif et tout est en CSS : le JavaScript ne fait que poser
   une classe. Il n'y a donc rien à recalculer au redimensionnement — c'est
   ce qui rend les trois états insensibles au retaillage, par construction
   plutôt que par écoute d'événement.

   Trois états : ancré (défaut) · réduit · plein écran.
   ========================================================================== */

:root {
  /* Échelle z sémantique — pas de 999 arbitraire. */
  --z-compose: 800;
  --z-compose-max: 900;
  --mc-rayon: 12px;
  --mc-entete: 46px;
}

/* Le conteneur : ancré en bas à droite, transparent aux clics pour ne pas
   couvrir l'application. Seules les fenêtres reçoivent les événements. */
#minicompose_container {
  position: fixed;
  inset: auto 0 0 auto;
  width: auto;                /* était 8000px — débordement horizontal garanti */
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0 1.5rem;
  max-width: 100vw;
  text-align: initial;
  pointer-events: none;
  z-index: var(--z-compose);
}
#minicompose_container > * { pointer-events: auto; }

/* ---- État ancré ---------------------------------------------------------- */
.minicompose_maindiv {
  width: min(680px, calc(100vw - 3rem));
  height: min(660px, calc(100vh - 3rem));
  margin: 0;                  /* annule margin-right:40px et margin-top:-620px */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--background);
  border: 1px solid var(--bdc-line);
  border-bottom: 0;
  border-radius: var(--mc-rayon) var(--mc-rayon) 0 0;
  box-shadow: 0 -1px 2px rgba(10, 11, 12, 0.04), 0 18px 44px -14px rgba(10, 11, 12, 0.32);
  transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1),
              height 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.minicompose_iframe { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; display: block; }

/* ---- État réduit --------------------------------------------------------- */
/* On replie par la hauteur, sans `display:none` sur l'iframe : masquer un
   iframe le fait repeindre au retour, et le brouillon en cours de frappe
   perdrait le focus. */
.minicompose_reduced2 {
  width: min(320px, calc(100vw - 3rem)) !important;
  height: auto !important;
  transform: none !important;   /* annule translate(0, 585px) */
}
.minicompose_reduced2 .minicompose_iframe { flex: 0 0 0; height: 0; }

/* ---- État plein écran ---------------------------------------------------- */
.minicompose_maindiv.minicompose_max {
  position: fixed;
  inset: 1.75rem;
  width: auto;
  height: auto;
  max-width: 1120px;
  margin-inline: auto;
  border: 1px solid var(--bdc-line);
  border-radius: var(--mc-rayon);
  box-shadow: 0 32px 80px -24px rgba(10, 11, 12, 0.4);
  z-index: var(--z-compose-max);
}

/* ---- En-tête ------------------------------------------------------------- */
.minicompose_header {
  flex: 0 0 auto;
  height: var(--mc-entete);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.35rem 0 1rem;
  background-color: var(--bdc-ink);
  color: #ffffff;
  border-radius: var(--mc-rayon) var(--mc-rayon) 0 0;
  cursor: pointer;
  user-select: none;
}
.minicompose_max .minicompose_header { cursor: default; }

.minicompose_header_left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;               /* sans ça, le titre long pousse les boutons dehors */
  max-width: none;
  float: none;
  flex: 1 1 auto;
}
.minicompose_title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  color: #ffffff;
}
/* Tant que l'objet est vide, le titre l'annonce plutôt que de rester blanc. */
.minicompose_title:empty::before { content: "Nouveau message"; color: rgba(255, 255, 255, 0.72); }

.minicompose_header_right { display: flex; align-items: center; gap: 2px; float: none; height: auto; }
.minicompose_header_right div,
.minicompose_send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.minicompose_header_right div:hover,
.minicompose_send:hover { background-color: rgba(255, 255, 255, 0.14); color: #ffffff; }
.minicompose_header_right div:active { background-color: rgba(255, 255, 255, 0.22); }
.minicompose_header_right div:focus-visible,
.minicompose_send:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }

/* Le bouton plein écran n'existe pas en amont : son glyphe non plus.
   Agrandir puis réduire — l'icône dit ce que le clic va faire. */
.maxicon:before { content: "\f065"; }
.minicompose_max .maxicon:before { content: "\f066"; }

/* ---- Sous 40rem : feuille plein écran ------------------------------------ */
/* Une fenêtre flottante de 680 px sur un téléphone n'a pas de sens : elle
   couvre l'écran sans en assumer les bords. On passe en feuille pleine. */
@media (max-width: 640px) {
  #minicompose_container { padding: 0; inset: auto 0 0 0; }
  .minicompose_maindiv,
  .minicompose_maindiv.minicompose_max {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .minicompose_reduced2 {
    inset: auto 0 0 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--mc-rayon) var(--mc-rayon) 0 0;
  }
}

/* ---- Fenêtres très basses ------------------------------------------------ */
/* Un portable en paysage : 3,5 rem d'en-tête + marges ne laissent rien au
   corps du message. On rend la fenêtre pleine hauteur plutôt que tronquée. */
@media (max-height: 520px) {
  .minicompose_maindiv { height: calc(100vh - 1rem); }
  .minicompose_maindiv.minicompose_max { inset: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .minicompose_maindiv { transition: none; }
}

/* Réduite, Elastic2025 masque TOUS les boutons (`display:none !important`) :
   la seule sortie devient un clic sur l'en-tête, et fermer un brouillon
   inutile oblige à le rouvrir d'abord. On rend la fermeture et le plein
   écran accessibles ; seul « réduire » disparaît, puisque l'en-tête le fait. */
.minicompose_reduced2 .minicompose_header_right { display: flex !important; }
.minicompose_reduced2 .minicompose_header_right .minusicon { display: none; }

html.dark-mode .minicompose_header { background-color: #1c1c1c; }
html.dark-mode .minicompose_maindiv { border-color: #3a3a3a; background: #121212; }

/* ==========================================================================
   13. L'INTÉRIEUR DE LA FENÊTRE DE RÉDACTION
   Le corps de la rédaction est un iframe : il hérite d'Elastic et de
   Bootstrap, pas des règles posées plus haut pour la liste. D'où trois
   couleurs étrangères à la charte qui subsistaient ici :

     · #37beff  le bleu Elastic, en bordure du champ destinataire actif
     · #ced4da  le gris BLEUTÉ de Bootstrap, en bordure des champs
     · #f1f3f4 / #222f3e  le fond et l'encre bleutés de la barre TinyMCE

   On reprend la même règle que partout : gris strictement neutres, encre
   #0a0b0c, et l'état actif dit par l'encre plutôt que par une couleur.
   ========================================================================== */

/* ---- Champs : destinataire, objet ---------------------------------------- */
.form-control,
.recipient-input,
#compose-subject,
#compose-headers input,
.compose-headers input,
.compose-headers textarea {
  border-color: var(--bdc-line);
  color: var(--bdc-ink);
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: none;
}
.form-control::placeholder, #compose-subject::placeholder {
  /* Le gris trop clair par défaut tombe sous 4,5:1 : un intitulé de champ
     illisible ne remplit pas son office. */
  color: var(--bdc-muted);
  opacity: 1;
}
.form-control:focus,
#compose-subject:focus,
.recipient-input:focus-within {
  border-color: var(--bdc-ink);
  box-shadow: 0 0 0 1px var(--bdc-ink);   /* l'épaisseur, pas la couleur */
  outline: none;
}
/* Le champ destinataire est un groupe : seule sa bordure extérieure compte. */
.recipient-input { border-radius: 6px 0 0 6px; }

/* ---- Boutons À / Cc / Cci ------------------------------------------------ */
/* Ils se touchaient à un pixel près (Cc finissait à 602, Cci commençait à
   601). Et l'aplat gris plein les faisait lire comme des champs remplis
   plutôt que comme des interrupteurs. Boutons fantômes, espacés, avec un
   état actif franc. */
#compose-headers button,
.compose-headers button,
a.btn.cc, a.btn.bcc {
  background: transparent !important;
  border: 1px solid var(--bdc-line);
  color: var(--bdc-muted);
  border-radius: 6px;
  padding-inline: 0.75em;
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
#compose-headers button:hover,
.compose-headers button:hover,
a.btn.cc:hover, a.btn.bcc:hover {
  background: var(--bdc-soft) !important;
  border-color: var(--bdc-muted-2);
  color: var(--bdc-ink);
}
#compose-headers button:focus-visible,
.compose-headers button:focus-visible { outline: 2px solid var(--bdc-ink); outline-offset: 1px; }
#compose-headers button[aria-pressed="true"],
#compose-headers button.selected,
.compose-headers button[aria-pressed="true"],
.compose-headers button.selected {
  background: var(--bdc-ink) !important;
  border-color: var(--bdc-ink);
  color: #ffffff;
}
/* Le premier bouton de la rangée (« À ») n'a pas de voisin à gauche. */
#compose-headers td:first-child button,
.compose-headers td:first-child button { margin-left: 0; }

/* ---- Barre de mise en forme ---------------------------------------------- */
/* `toolbar_mode: 'sliding'` (posé par le patcher) empêche le passage à la
   ligne. Cette règle est la ceinture : même si une rangée surnuméraire
   apparaissait, elle pousserait le corps du message au lieu de le recouvrir. */
div.tox .tox-editor-header,
div.tox .tox-toolbar__primary,
div.tox .tox-toolbar-overlord {
  height: auto !important;
  min-height: 0;
  flex-wrap: wrap;
  background: #ffffff;
  border-bottom: 1px solid var(--bdc-line);
  box-shadow: none;
}
div.tox .tox-tbtn { color: var(--bdc-ink); }
div.tox .tox-tbtn svg { fill: var(--bdc-ink); }
div.tox .tox-tbtn:hover { background: var(--bdc-soft); }
div.tox .tox-tbtn--enabled,
div.tox .tox-tbtn--enabled:hover { background: var(--bdc-line); }
div.tox .tox-tbtn--select { color: var(--bdc-ink); }
div.tox:not(.tox-tinymce-inline) .tox-editor-header { padding: 4px 6px; }
div.tox .tox-toolbar__group { border: 0; padding: 0 4px; }
/* Séparateur entre groupes : un filet, pas une bordure épaisse. */
div.tox .tox-toolbar__group:not(:last-child) { box-shadow: 1px 0 0 var(--bdc-line); }

div.tox, div.tox .tox-edit-area__iframe { border-color: var(--bdc-line); background: #ffffff; }

/* ---- Zone « Joindre un fichier » ----------------------------------------- */
#compose-attachments .attachmentslist,
.filedrop { border-color: var(--bdc-line); border-radius: 8px; }

html.dark-mode .form-control,
html.dark-mode #compose-subject { background-color: #1c1c1c; border-color: #3a3a3a; color: #ededed; }
html.dark-mode div.tox .tox-editor-header,
html.dark-mode div.tox .tox-toolbar__primary { background: #1c1c1c; border-bottom-color: #3a3a3a; }
html.dark-mode div.tox .tox-tbtn { color: #ededed; }
html.dark-mode div.tox .tox-tbtn svg { fill: #ededed; }

/* ---- Panneau de débordement de la barre ---------------------------------- */
/* En mode « sliding », TinyMCE laisse un conteneur de débordement sous la
   barre. Replié il garde une boîte, et ses boutons affleuraient sous le
   « … » — les deux éléments qui se chevauchaient. On le sort du flux : il
   flotte au-dessus du corps du message, comme un menu, au lieu de pousser
   ou de recouvrir quoi que ce soit. */
div.tox .tox-toolbar__overflow {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 6;
  background: #ffffff;
  border: 1px solid var(--bdc-line);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 28px -10px rgba(10, 11, 12, 0.3);
}
div.tox .tox-toolbar__overflow--closed,
div.tox .tox-toolbar__overflow[aria-hidden="true"] {
  /* Replié, il ne doit occuper aucune surface ni intercepter aucun clic. */
  height: 0 !important;
  min-height: 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
  box-shadow: none;
  pointer-events: none;
}
div.tox .tox-editor-header { position: relative; }

html.dark-mode div.tox .tox-toolbar__overflow { background: #1c1c1c; border-color: #3a3a3a; }

/* ---- Cc / Cci : desserrer le groupe -------------------------------------- */
/* Ces deux boutons vivent dans un `.input-group` Bootstrap, dont le principe
   est justement de coller ses éléments les uns aux autres (Cc finissait à
   602 px, Cci commençait à 601). Ce sont deux interrupteurs distincts, pas
   un segment continu : il leur faut de l'air, et des angles chacun. */
#compose-headers .input-group-append,
#compose-headers .input-group-prepend { gap: 6px; margin-left: 6px; }

#compose-headers .input-group > .btn,
#compose-headers .input-group-append > .btn,
#compose-headers a.btn,
#compose-headers button {
  margin-left: 6px !important;
  border-radius: 6px !important;
}
#compose-headers .input-group > .form-control,
#compose-headers .recipient-input { border-radius: 6px !important; }

/* ==========================================================================
   14. LE LOGO DANS LA BARRE LATÉRALE
   Elastic2025 n'affiche la marque nulle part une fois la session ouverte :
   la barre commence directement par « Rédiger ». Un webmail sans marque
   ressemble à n'importe quel webmail.

   Ordre voulu : logo · respiration · Rédiger · le reste du menu.
   On passe l'en-tête de la barre en colonne et on pose la marque en
   pseudo-élément — aucun gabarit à dupliquer, donc rien à resynchroniser
   à la prochaine version du fork.
   ========================================================================== */

#layout-sidebar > .header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  padding: 1.4rem 1rem 1.1rem;
  gap: 1.15rem;                 /* la respiration entre marque et bouton */
  background: transparent;
  border-bottom: 1px solid var(--bdc-line);
}

#layout-sidebar > .header::before {
  content: "";
  display: block;
  width: min(148px, 100%);
  height: 34px;
  background: url("../images/logo.svg") left center / contain no-repeat;
  flex: 0 0 auto;
}

/* Le bouton reprend la largeur de la colonne : deux blocs alignés valent
   mieux qu'un bouton flottant sous un logo. */
#layout-sidebar > .header .compose.button { margin: 0; width: 100%; }
#layout-sidebar > .header .compose.button div { width: 100%; height: 42px; line-height: 42px; }

/* Barre repliée : le pictogramme seul, sinon le mot-symbole se comprime. */
@media (max-width: 1024px) {
  #layout-sidebar > .header { padding: 1rem 0.75rem; gap: 0.9rem; }
  #layout-sidebar > .header::before { height: 28px; }
}

/* ==========================================================================
   15. UN SEUL BORD GAUCHE
   Mesuré sur la barre de 283 px : le logo commençait à 3,5 px, le contenu
   du bouton à 18 px, les dossiers à 21 px. Trois alignements dans une
   colonne qui n'en demande qu'un — c'est ce qui faisait « pas propre »
   avant même qu'on sache dire pourquoi.

   Pire : le bouton finissait à 294 px pour une colonne large de 283. Il
   dépassait de 11 px, masqués par le débordement du conteneur.

   On pose une gouttière unique de 20 px. Tout s'y aligne : la marque, le
   bouton, les dossiers. Le `!important` sur le retrait est nécessaire —
   Elastic applique le sien sur `.header` avec une spécificité supérieure.
   ========================================================================== */

#layout-sidebar > .header {
  padding: 22px var(--bdc-gouttiere) 18px !important;
  gap: 16px;
}

:root { --bdc-gouttiere: 21px; }   /* le rail des dossiers, repris tel quel */

/* La marque cadrée sur la gouttière, plafonnée pour ne pas devenir une
   bannière : elle signe la colonne, elle ne la remplit pas. */
#layout-sidebar > .header::before {
  width: 100%;
  max-width: 146px;
  height: 32px;
}

/* Le bouton occupe exactement la largeur utile. `box-sizing` est la pièce
   qui manquait : sans lui, `width: 100%` s'ajoute aux marges internes et
   c'est comme ça qu'on dépasse de la colonne. */
#layout-sidebar > .header .compose.button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#layout-sidebar > .header .compose.button div {
  width: 100%;
  margin: 0;
  height: 44px;
  line-height: 44px;
  box-sizing: border-box;
}

/* Les dossiers, eux, on n'y touche pas. Elastic calcule leur retrait par
   NIVEAU d'imbrication ; forcer une valeur unique mettait les sous-dossiers
   (09-2026, 01-2027) au même rang que leurs parents et faisait disparaître
   la hiérarchie. Leur rail est déjà à 21 px : on cale la gouttière dessus
   plutôt que l'inverse. Un pixel d'écart ne se voit pas, une arborescence
   aplatie se voit tout de suite. */

/* ==========================================================================
   16. LA COLONNE DES MARQUEURS
   Mesuré sur une ligne de liste : la cellule `.flags` fait 14 px de large,
   et le trombone qui s'y loge en fait 25. Il débordait de 8 px sur la
   gauche et venait se poser sur le drapeau — les deux icônes superposées.

   La ligne fait 72 px de haut (présentation sur deux lignes) : il y a la
   place de les empiler. Drapeau au-dessus, trombone en dessous, chacun
   centré dans une colonne assez large pour le plus large des deux.
   ========================================================================== */

.messagelist td.flags {
  width: 34px;
  min-width: 34px;
  padding: 8px 3px;
  text-align: center;
  vertical-align: top;
  white-space: normal;
  overflow: visible;
}

.messagelist td.flags > span,
.messagelist td.flags > i,
.messagelist td.flags .attachment,
.messagelist td.flags .flag,
.messagelist td.flags .msgicon,
.messagelist td.flags .statusicon {
  position: static;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 5px;
  line-height: 1;
  text-align: center;
}
.messagelist td.flags > *:last-child { margin-bottom: 0; }

/* Les marqueurs sont des repères, pas des titres : gris neutre, et le
   drapeau seul garde une couleur, puisque c'est son seul rôle. */
.messagelist td.flags .attachment { color: var(--bdc-muted); }

/* ==========================================================================
   17. CONTRASTE DE LA LISTE
   Sur fond blanc, la date sortait en #8c8c8c — 3,4:1, sous le seuil de
   4,5:1. L'objet à #585858 passait la norme (7,1:1) mais restait effacé
   pour la ligne qu'on lit en premier après l'expéditeur.

   Le gris clair « pour faire élégant » est la première cause d'interfaces
   pénibles à lire. On remonte les deux, et on garde la distinction lu /
   non-lu par la GRAISSE plutôt que par l'effacement : un message lu reste
   un message qu'on doit pouvoir relire.
   ========================================================================== */

html:not(.dark-mode) .messagelist td.subject { color: #4a4a4a; }        /* 8,9:1 */
html:not(.dark-mode) .messagelist tr.unread td.subject { color: var(--bdc-ink); }

html:not(.dark-mode) .messagelist span.date,
html:not(.dark-mode) .messagelist span.size { color: #585858; }         /* 7,1:1 */
html:not(.dark-mode) .messagelist tr.unread span.date {
  color: var(--bdc-ink-2);
  font-weight: 500;
}

/* Expéditeur d'un message lu : lisible franchement, sans concurrencer le
   non-lu qui, lui, prend l'encre et la graisse. */
html:not(.dark-mode) .messagelist span.fromto,
html:not(.dark-mode) .messagelist span.fromto .rcmContactAddress { color: #2b2b2b; }

/* Les libellés secondaires de l'interface, mêmes seuils. */
html:not(.dark-mode) .listing tbody td.subject span.date,
html:not(.dark-mode) #messagelist-header,
html:not(.dark-mode) .pagenav .count { color: #585858; }

/* ==========================================================================
   18. LA FENÊTRE DE RÉDACTION — DENSITÉ
   Remplace le traitement « en boîtes » de la section 13.

   Mesuré : 154 px de chrome avant la première ligne de texte, dans une
   fenêtre de 660. Un quart de la surface consommé par trois rectangles
   bordés empilés — destinataire, objet, barre d'outils — chacun avec sa
   bordure, son rayon et sa marge. C'est cet empilement d'encadrés qui fait
   « pas professionnel » : un formulaire dessiné boîte par boîte au lieu
   d'une feuille organisée en lignes.

   Parti pris : des LIGNES, pas des boîtes. Chaque en-tête est une rangée
   de 40 px séparée par un filet d'un pixel, pleine largeur, sans bordure
   ni rayon. Les champs n'ont plus de contour : la ligne sur laquelle ils
   reposent suffit à les délimiter, et le curseur dit lequel est actif.
   C'est la structure de Gmail, d'Outlook et de Superhuman, pour la même
   raison : à l'écran, une règle vaut mieux qu'un cadre.
   ========================================================================== */

/* ---- Plus de marges autour du bloc d'en-têtes ---------------------------- */
#compose-content { padding: 0 !important; }
#compose-headers { margin: 0 !important; padding: 0 !important; }
#compose-headers > table.table,
#compose-headers tbody,
#compose-headers > table.table > tbody > tr > td {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100%;
}
#compose-headers .table-responsive-sm { padding-right: 0 !important; }

/* ---- Une rangée = une ligne de 40 px ------------------------------------- */
table.compose-headers { width: 100%; margin: 0; }
table.compose-headers > tbody > tr > td {
  padding: 0 14px !important;
  height: 40px;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid var(--bdc-line);
}

/* ---- Champs sans contour ------------------------------------------------- */
#compose-headers .form-control,
#compose-headers .recipient-input,
#compose-subject {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  height: 38px;
  padding: 0 !important;
  font-size: 0.9rem;
}
#compose-headers .form-control:focus,
#compose-subject:focus { box-shadow: none !important; outline: none; }

#compose-subject {
  padding: 0 14px !important;
  height: 40px;
  border-bottom: 1px solid var(--bdc-line) !important;
  font-weight: 500;
}
#compose-subject::placeholder { font-weight: 400; color: var(--bdc-muted); }

/* ---- « À » : une étiquette, pas un bouton -------------------------------- */
/* Un bouton gris annonce une action. Celui-ci n'en déclenche aucune : il
   nomme le champ. Il redevient donc du texte. */
#compose-headers td:first-child a.btn,
#compose-headers td:first-child button,
#compose-headers .input-group-prepend .btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  min-width: 28px;
  color: var(--bdc-muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
}

/* ---- Cc / Cci : des liens, discrets -------------------------------------- */
#compose-headers .input-group-append .btn,
#compose-headers .input-group-append button,
#compose-headers a.btn.cc,
#compose-headers a.btn.bcc {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 0 0 14px !important;
  padding: 0 !important;
  color: var(--bdc-muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
#compose-headers .input-group-append .btn:hover,
#compose-headers a.btn.cc:hover,
#compose-headers a.btn.bcc:hover {
  background: transparent !important;
  color: var(--bdc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#compose-headers .input-group-append { gap: 0 !important; margin-left: 0 !important; }

/* ---- Barre de mise en forme : un filet, pas un bandeau ------------------- */
div.tox .tox-editor-header {
  padding: 2px 8px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--bdc-line) !important;
  box-shadow: none !important;
}
div.tox .tox-toolbar__primary { background: #ffffff !important; min-height: 36px; }
div.tox .tox-tbtn { height: 30px; margin: 2px 0; }
div.tox .tox-tbtn--select { width: auto; padding: 0 6px; }
div.tox:not(.tox-tinymce-inline) { border: 0 !important; }

/* ---- Corps du message ---------------------------------------------------- */
div.tox .tox-edit-area { padding: 0; }
div.tox .tox-sidebar-wrap { border: 0; }

/* Cc et Cci se recollaient : `gap: 0` annulait l'espacement, et la marge
   posée sur `.btn` ne les atteignait pas tous. On espace par la fratrie,
   qui ne dépend d'aucune classe — donc insensible au balisage exact. */
/* `td:last-child` visait la cellule de Cc/Cci — mais la cellule de l'OBJET
   est elle aussi dernière de sa rangée. Elle passait donc en `inline-flex`
   et se réduisait à son contenu : 64 px, et un champ objet de 36 px où l'on
   ne voyait pas ce qu'on tapait. On ne vise plus que la rangée qui contient
   réellement Cc/Cci. */
#compose-headers .input-group-append,
#compose-headers tr:has(#mini_cc) > td:last-child {
  display: inline-flex;
  align-items: center;
  gap: 16px !important;
  white-space: nowrap;
}
#compose-headers .input-group-append > * + * { margin-left: 0 !important; }

/* L'espacement par `gap` dépend du conteneur, et le balisage de Roundcube
   ne place pas toujours Cc et Cci dans le même parent flex. Le retrait
   INTERNE, lui, appartient à l'élément : il s'applique quel que soit le
   parent. C'est la forme robuste ici. */
#compose-headers .input-group-append .btn,
#compose-headers .input-group-append button,
#compose-headers a.btn.cc,
#compose-headers a.btn.bcc { padding: 0 9px !important; }
#compose-headers td:last-child { text-align: right; }

/* ==========================================================================
   19. Cc / Cci — LES VRAIS SÉLECTEURS
   Balisage relevé dans le DOM, après trois tentatives à l'aveugle :

       <span class="input-group-append" id="mini_cc">
         <a class="form-control"><span class="inner">Cc</span></a>

   Ils portent `.form-control`, la même classe que les champs de saisie. Ma
   règle `#compose-headers .form-control { padding: 0 !important }` de la
   section 18 leur retirait donc le retrait que j'essayais de leur poser
   ailleurs : je me battais contre ma propre feuille. On vise les
   identifiants, qui n'appartiennent qu'à eux.
   ========================================================================== */

#mini_cc, #mini_bcc { display: inline-block; margin-left: 18px !important; }
#mini_cc > a.form-control,
#mini_bcc > a.form-control {
  display: inline-block;
  width: auto !important;
  height: auto !important;
  padding: 4px 2px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bdc-muted);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
#mini_cc > a.form-control:hover,
#mini_bcc > a.form-control:hover {
  color: var(--bdc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   20. BARRE DE MISE EN FORME EN BAS
   Gmail place la mise en forme sous le message, à côté d'« Envoyer » : on
   écrit d'abord, on met en forme ensuite. TinyMCE sait le faire nativement
   (`toolbar_location`), posé par le patcher — pas de DOM à déplacer.
   Le filet passe donc au-dessus de la barre, plus en dessous.
   ========================================================================== */

div.tox .tox-editor-header {
  border-bottom: 0 !important;
  border-top: 1px solid var(--bdc-line) !important;
}

/* En-tête de la fenêtre : Gmail l'affiche en clair, pas en aplat noir.
   L'encre pleine sur 46 px attire l'œil sur le chrome au lieu du message. */
.minicompose_header {
  background-color: var(--bdc-soft);
  color: var(--bdc-ink);
  border-bottom: 1px solid var(--bdc-line);
}
.minicompose_title { color: var(--bdc-ink); font-weight: 600; }
.minicompose_title:empty::before { color: var(--bdc-ink); }
.minicompose_header_right div,
.minicompose_send { color: var(--bdc-muted); }
.minicompose_header_right div:hover,
.minicompose_send:hover { background-color: rgba(10, 11, 12, 0.08); color: var(--bdc-ink); }
.minicompose_header_right div:focus-visible { outline-color: var(--bdc-ink); }

/* La règle `#compose-headers .input-group-append { margin-left: 0 !important }`
   de la section 18 est plus spécifique (1,1,0) que `#mini_bcc` (1,0,0) et
   l'emportait malgré le !important — deux !important se départagent à la
   spécificité. On combine les deux identifiants pour passer devant. */
#compose-headers span#mini_cc,
#compose-headers span#mini_bcc { margin-left: 20px !important; }

/* Barre de mise en forme : remise en haut à la demande — le filet repasse
   donc sous elle, et non au-dessus. */
div.tox .tox-editor-header {
  border-top: 0 !important;
  border-bottom: 1px solid var(--bdc-line) !important;
}

/* La signature s'affichait à sa taille d'origine et remplissait la fenêtre. */
.mce-content-body img, .tox-edit-area img { max-width: 100%; height: auto; }

/* ==========================================================================
   21. « ENVOYER » TOUJOURS ATTEIGNABLE
   Le fork masque l'en-tête du formulaire dans la fenêtre ancrée, et le
   bouton d'envoi vivait dedans : il disparaissait avec lui, ne laissant que
   la petite icône avion du bandeau. Le patcher le sort de l'en-tête avant
   le masquage et lui pose la classe `bdc_sendmain_ancre`.

   Ancré en bas à gauche de la fenêtre, au-dessus du contenu. Sur un message
   long, l'action principale reste sous la main sans avoir à dérouler.
   ========================================================================== */

#compose-content { padding-bottom: 62px !important; }

button.bdc_sendmain_ancre {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 30;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: auto;
  min-width: 118px;
  height: 38px;
  margin: 0;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: var(--bdc-ink) !important;
  color: #ffffff !important;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px -6px rgba(10, 11, 12, 0.45);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
button.bdc_sendmain_ancre:hover {
  background-color: var(--bdc-sombre) !important;
  box-shadow: 0 8px 22px -6px rgba(10, 11, 12, 0.5);
}
button.bdc_sendmain_ancre:active { box-shadow: 0 3px 10px -4px rgba(10, 11, 12, 0.5); }
button.bdc_sendmain_ancre:focus-visible { outline: 2px solid var(--bdc-ink); outline-offset: 2px; }

/* L'icône du bouton reprend la couleur du texte, sinon elle reste sombre
   sur l'aplat d'encre. */
button.bdc_sendmain_ancre::before,
button.bdc_sendmain_ancre .inner { color: #ffffff !important; }

@media (prefers-reduced-motion: reduce) {
  button.bdc_sendmain_ancre { transition: none; }
}

/* Le bouton mesurait 74 px de haut : il conserve de sa vie précédente dans
   la barre d'outils un pictogramme sur pastille ronde, avec ses propres
   marges. On neutralise la pastille et on fixe la hauteur — un `!important`
   est nécessaire, ces règles viennent d'Elastic avec plus de spécificité. */
button.bdc_sendmain_ancre {
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 20px 0 16px !important;
  line-height: 1 !important;
}
button.bdc_sendmain_ancre::before {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   22. DENSITÉ
   Mesuré : ligne de liste 72 px, dossier 42 px, en-tête 35 px. Gmail tient
   ses lignes autour de 40 px. Le texte, lui, est déjà à 14 px des deux
   côtés — ce n'est donc pas la police qui fait « trop gros », ce sont les
   hauteurs de ligne et les marges internes. Réduire la police aurait
   dégradé la lisibilité sans régler le problème.

   On resserre les rythmes, on garde la taille du texte.
   ========================================================================== */

/* Ligne de liste : 72 → 54 px. La présentation reste sur deux lignes
   (expéditeur puis objet), mais sans l'air superflu entre les deux. */
.messagelist tbody tr { height: auto; }
.messagelist tbody td.subject {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.35;
}
.messagelist span.fromto,
.messagelist span.subject { line-height: 1.35; }
.messagelist span.fromto { font-size: 0.92rem; }
.messagelist td.subject > span.subject,
.messagelist td.subject > span:not(.fromto):not(.date):not(.size) { font-size: 0.88rem; }
.messagelist span.date, .messagelist span.size { font-size: 0.8rem; }

/* Dossiers : 42 → 34 px, et le libellé reste sur sa ligne. */
#folderlist-content li a {
  height: 34px;
  line-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.9rem;
}
#folderlist-content li a .unreadcount { font-size: 0.78rem; }

/* Menu du bas : même rythme. */
.menu_bottom a { height: 36px; line-height: 36px; font-size: 0.9rem; }

/* En-tête de la barre latérale : on récupère la place prise par le logo. */
#layout-sidebar > .header { padding: 16px var(--bdc-gouttiere) 14px !important; gap: 12px; }
#layout-sidebar > .header::before { height: 28px; max-width: 132px; }
#layout-sidebar > .header .compose.button div { height: 38px; line-height: 38px; font-size: 0.82rem; }

/* ==========================================================================
   23. LA RECHERCHE
   Elle sortait en champ de formulaire ordinaire, haut de 35 px, posé dans
   un bandeau. Gmail en fait la pièce maîtresse de son en-tête : une pilule
   pleine, sans bordure, large, avec la loupe à gauche. C'est ce qui la
   rend trouvable du premier coup d'œil.
   ========================================================================== */

#messagelist-header, .searchbar {
  height: 52px;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff !important;
  border-bottom: 1px solid var(--bdc-line);
}

.searchbar {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 6px 0 12px !important;
  border: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: var(--bdc-soft) !important;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.searchbar:focus-within {
  background: #ffffff !important;
  box-shadow: 0 0 0 1px var(--bdc-line), 0 4px 14px -6px rgba(10, 11, 12, 0.28);
}

.searchbar input,
.searchbar input:focus {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  font-size: 0.92rem;
  color: var(--bdc-ink);
}
.searchbar input::placeholder { color: var(--bdc-muted); opacity: 1; }

/* Loupe à gauche, boutons à droite, tous discrets et de même gabarit. */
.searchbar a, .searchbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--bdc-muted);
  background: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.searchbar a:hover, .searchbar button:hover {
  background: rgba(10, 11, 12, 0.07);
  color: var(--bdc-ink);
}
.searchbar a:focus-visible { outline: 2px solid var(--bdc-ink); outline-offset: 1px; }

/* Le pied de liste (pagination) au même rythme que l'en-tête. */
.menu.pagenav { height: 44px; }

/* La colonne des marqueurs (section 16) était devenue la cellule la plus
   haute de la rangée : deux icônes de 24 px empilées, 5 px d'écart, 16 px
   de marges — 69 px à elle seule, qui imposaient leur hauteur à toute la
   ligne. Les marqueurs sont secondaires : ils se mettent au rythme de la
   ligne, ils ne le fixent pas. */
.messagelist td.flags { padding: 5px 3px; }
.messagelist td.flags > span,
.messagelist td.flags > i,
.messagelist td.flags .attachment,
.messagelist td.flags .flag,
.messagelist td.flags .msgicon,
.messagelist td.flags .statusicon {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.1;
}
.messagelist td.flags .attachment,
.messagelist td.flags .flag { height: 18px; }

/* Même principe pour la colonne de sélection : le rond ne commande pas. */
.messagelist td.selection { padding: 0 6px; }
.messagelist .sel_circle { width: 18px; height: 18px; }

/* ==========================================================================
   24. LECTURE D'UN MESSAGE
   Mesuré sur une réponse réelle : corps de 1971 px dont 1746 de citation.
   La réponse — les trois lignes qui comptent — occupait 11 % de la hauteur,
   noyée sous l'historique du fil. C'est le défaut central de la lecture.

   Trois gestes : un objet qui tient son rang, une largeur de lecture
   plafonnée, et une citation repliée par défaut.
   ========================================================================== */

/* ---- Objet : le titre du message ----------------------------------------- */
.subject, #messageheader .subject {
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bdc-ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  text-wrap: balance;
}

/* ---- En-tête : expéditeur, date --------------------------------------- */
#messageheader, .message-headers, .header-summary {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bdc-line);
  background: #ffffff;
}
#messageheader .adr, #messageheader .from, .header-summary .adr {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--bdc-ink);
}
#messageheader .date, .header-summary .date,
#messageheader .rcmContactAddress + span { font-size: 0.84rem; color: var(--bdc-muted); }

/* ---- Largeur de lecture --------------------------------------------------- */
/* Une ligne de 800 px fait plus de 110 caractères : l'œil perd le début de
   la ligne suivante. On plafonne le texte, pas les images ni les tableaux,
   qui gardent la pleine largeur. */
#messagebody .message-part > div,
#messagebody .message-htmlpart > div { max-width: 74ch; }
#messagebody img, #messagebody table { max-width: 100%; }

#messagebody { padding: 18px 20px 28px; line-height: 1.6; }

/* ---- La citation ---------------------------------------------------------- */
/* Le fond bleuté d'Elastic2025 (rgba(241,243,244,.5)) part, comme partout.
   Repliée, elle n'occupe plus que sa barre de rappel ; le greffon
   `hide_blockquote` (activé dans la configuration) pose le bouton. */
#messagebody blockquote,
.message-htmlpart blockquote,
.message-part blockquote {
  margin: 1.1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bdc-line);
  border-radius: 8px;
  background: var(--bdc-soft);
  color: var(--bdc-ink-2);
  font-size: 0.94rem;
}
/* Une citation dans une citation ne redouble pas le cadre : elle se décale.
   Sans cela, un fil de cinq réponses produit cinq cadres emboîtés. */
#messagebody blockquote blockquote {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0.6rem 0 0.6rem 0.9rem;
  padding: 0 0 0 0.9rem;
  box-shadow: inset 1px 0 0 var(--bdc-line);
}

/* Le bouton « … » du greffon hide_blockquote. */
.blockquote-header, div.blockquote-header {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 24px;
  padding: 0 12px;
  border: 1px solid var(--bdc-line);
  border-radius: 999px;
  background: var(--bdc-soft);
  color: var(--bdc-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.blockquote-header:hover { background: var(--bdc-line); color: var(--bdc-ink); }

/* ---- Pièces jointes ------------------------------------------------------- */
#attachment-list li, .attachmentslist li {
  border: 1px solid var(--bdc-line);
  border-radius: 8px;
  background: #ffffff;
}

/* La recherche manquait de présence : #f2f2f2 sur blanc, c'est 2 % d'écart. */
.searchbar { background: #ededed !important; }
.searchbar:focus-within { background: #ffffff !important; }

/* L'objet gardait 19,6 px : une règle d'Elastic2025 plus spécifique passait
   devant. Gmail titre autour de 22 px — l'objet est le nom du message, il
   doit se lire avant l'expéditeur. */
#messageheader .subject,
#messageheader h1.subject,
.header-title.subject,
div.subject, span.subject.voice + .subject {
  font-size: 1.5rem !important;
  font-weight: 600;
  line-height: 1.28;
  color: var(--bdc-ink);
}

/* ---- Citation venue de Gmail --------------------------------------------- */
/* Le greffon hide_blockquote ne replie que `div.message-part div.pre >
   blockquote` — une citation enfant DIRECT. Gmail enveloppe la sienne dans
   `div.gmail_quote`, elle échappe donc au repli. Comme l'essentiel du
   courrier reçu vient de Gmail, le cas est la règle, pas l'exception.

   On ne peut pas replier sans JavaScript, mais on peut rendre la hiérarchie
   évidente : la citation passe en retrait, en plus petit et en gris, pour
   que la réponse — les lignes qui comptent — reste ce qu'on lit d'abord. */
#messagebody div.gmail_quote,
#messagebody div[class*="gmail_quote"] {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bdc-line);
  font-size: 0.9rem;
  color: var(--bdc-muted);
}
#messagebody div[class*="gmail_quote"] blockquote {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0.5rem 0 0.5rem 0.25rem;
  padding-left: 0.9rem;
  box-shadow: inset 1px 0 0 var(--bdc-line);
  font-size: inherit;
  color: inherit;
}

/* L'avatar sortait en violet — une couleur générée par Roundcube à partir
   de l'adresse. La marque est monochrome : encre sur gris clair, l'initiale
   suffit à distinguer les expéditeurs. */
.contact-header .image, .contactpic, #contact-photo,
.messageheader .contactphoto, span.rcmContactPhoto,
.image-attachment .image-link, .contact-avatar, .avatar {
  background-color: var(--bdc-panel) !important;
  background-image: none !important;
  color: var(--bdc-ink) !important;
  font-weight: 600;
}

/* Le corps du message sur blanc : le gris servait de fond de panneau, il
   n'a pas lieu d'être sous du texte long. */
#messagebody, #messagebody .message-part, #messagebody .message-htmlpart,
body.task-mail.action-preview #layout-content { background-color: #ffffff !important; }

/* ==========================================================================
   25. LA PAGE DE CONNEXION
   Premier écran du webmail, souvent le premier écran de la journée. Il ne
   portait qu'un logo et deux champs. Il dit maintenant où l'on est, ce
   qu'il faut saisir — l'adresse complète, la question numéro un du
   support — et où demander de l'aide.

   C'est le seul endroit où Aloevera, la police display de la marque, a sa
   place : la marque y parle. Partout ailleurs, Poppins porte le travail.
   ========================================================================== */

body.task-login #layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.25rem;
  background: #ffffff;
}

.bdc-login {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

/* ---- Marque -------------------------------------------------------------- */
.bdc-login__marque { margin-bottom: 2.25rem; text-align: center; }
.task-login #logo {
  position: static;
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 46px;
  height: auto;
  margin: 0 auto 0.7rem;
  top: auto;
}
.bdc-login__sur {
  margin: 0;
  font-family: var(--bdc-serif);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bdc-muted);
}

/* ---- Formulaire ---------------------------------------------------------- */
.task-login #login-form { position: static; width: 100%; max-width: none; margin: 0; top: auto; }
.task-login #login-form table, .task-login #login-form tbody { width: 100%; display: block; }
.task-login #login-form tr { display: block; margin-bottom: 0.7rem; }
.task-login #login-form td { display: block; width: 100%; padding: 0; }

/* ---- Aide et liens ------------------------------------------------------- */
.bdc-login__aide {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--bdc-muted);
}
.bdc-login__aide strong { color: var(--bdc-ink-2); font-weight: 600; }
.bdc-login__exemple {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  color: var(--bdc-ink-2);
  background: var(--bdc-soft);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  white-space: nowrap;
}

.bdc-login__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 1.6rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--bdc-line);
  list-style: none;
}
.bdc-login__liens a {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--bdc-ink-2);
  text-decoration: none;
}
.bdc-login__liens a:hover { color: var(--bdc-ink); text-decoration: underline; text-underline-offset: 3px; }
.bdc-login__liens a:focus-visible { outline: 2px solid var(--bdc-ink); outline-offset: 2px; border-radius: 2px; }

.bdc-login__note {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--bdc-muted);
}

#login-footer { flex: none; margin: 0; color: var(--bdc-muted); font-size: 0.78rem; }
#login-footer > div { margin: 0; padding: 0; background: none; }

/* ---- Sous 420 px --------------------------------------------------------- */
/* Le formulaire occupe la largeur, la marque se resserre : sur un téléphone
   on saisit une adresse longue, la place va au champ. */
@media (max-width: 420px) {
  body.task-login #layout-content { padding: 1.5rem 1rem; align-items: flex-start; }
  .bdc-login__marque { margin-bottom: 1.6rem; }
  .task-login #logo { max-height: 38px; }
  .bdc-login__sur { font-size: 0.86rem; letter-spacing: 0.2em; }
  .bdc-login__liens { gap: 0.5rem 1.2rem; }
}

/* Écrans bas (portable en paysage) : on colle en haut plutôt que de tronquer. */
@media (max-height: 620px) {
  body.task-login #layout-content { align-items: flex-start; padding-top: 2rem; }
}

/* L'objet ne faisait que 36 px : on ne voyait pas ce qu'on tapait. Sa
   cellule se dimensionne sur son contenu, donc `width: 100%` sur le champ
   ne valait que 100 % de rien. On donne la largeur à la CELLULE.
   `:has()` seul, sans toucher aux retraits — c'est leur combinaison qui
   avait déplacé Cc/Cci lors de la tentative précédente. */
table.compose-headers > tbody > tr:has(#compose-subject) > td { width: 100%; }
#compose-subject { width: 100% !important; }

/* ---- Filet continu sous chaque rangée d'en-tête --------------------------- */
/* Le filet était posé sur les CELLULES : un tableau en ayant plusieurs par
   rangée, de largeurs différentes, le trait sortait en fragments décalés.
   Une bordure sur `tr` ne se rend que si le tableau est en
   `border-collapse: collapse` — c'est la seule pièce qui manquait. */
table.compose-headers { border-collapse: collapse; }
table.compose-headers > tbody > tr { border-bottom: 1px solid var(--bdc-line); }
table.compose-headers > tbody > tr > td { border-bottom: 0 !important; }