/* ==========================================================================
   Mon serveur > Boîtes mail (odesa-mail.js ; PLAN_MESSAGERIE.md).
   La page ne défile pas : la liste des boîtes, les dossiers, les messages et la lecture défilent en eux-mêmes.
   ========================================================================== */

.ml { --ml-c: #0e7490; --ml-fond: #ecfeff; display: grid; grid-template-columns: 260px minmax(0, 1fr); height: clamp(460px, calc(100vh - 400px), 1200px); min-height: 0;
      border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; background: var(--carte); }
@media (min-width: 1000px) and (min-height: 620px) { .mp.cadre .mp-ix > .ml { flex: 1 1 0; height: auto; } }
.ml .ms { flex: none; }
.ml-note { margin: 0; color: var(--doux); font-size: .82rem; }
.ml-centre { text-align: center; padding: 24px 8px; }
.ml-ico { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--doux); cursor: pointer; }
.ml-ico:hover { background: var(--neutre); color: var(--texte); }
.ml-ico.is-on { color: #c2410c; }

/* les boîtes */
.ml-cote { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bord); }
.ml-cote-tete { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.ml-cote-tete b { display: inline-flex; align-items: center; gap: 6px; }
.ml-boites { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ml-boite { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin: 0; border: 1px solid transparent; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.ml-boite:hover { background: var(--neutre); }
.ml-boite.is-actif { background: var(--ml-fond); border-color: color-mix(in srgb, var(--ml-c) 30%, transparent); color: var(--ml-c); }
.ml-boite-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-boite-t b, .ml-boite-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-boite-t small { color: var(--doux); font-size: .74rem; }
.ml-pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ml-pt.is-ok { background: #16a34a; } .ml-pt.is-attente { background: #f59e0b; } .ml-pt.is-off { background: #94a3b8; }

/* à droite */
.ml-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ml-onglets { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--bord); flex: none; }
.ml-onglets button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--doux); font: 600 .86rem inherit; cursor: pointer; }
.ml-onglets button.is-actif { color: var(--ml-c); border-bottom-color: var(--ml-c); }
.ml-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--doux); }
.ml-vide h3 { margin: 0; color: var(--texte); }
.ml-vide p { max-width: 460px; margin: 0; }

/* réglages, droits */
.ml-reglages, .ml-droits { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ml-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.ml-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.ml-champ.is-large { grid-column: 1 / -1; }
.ml-champ > span { font-size: .72rem; font-weight: 700; color: var(--doux); text-transform: uppercase; letter-spacing: .02em; }
.ml-serveur { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px 12px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px 10px; }
.ml-serveur legend { padding: 0 6px; font-weight: 700; font-size: .82rem; }
.ml-serveur .ml-champ:last-child { grid-column: 1 / -1; }
.ml-case { display: inline-flex; align-items: center; gap: 8px; }
.ml-secret, .ml-oauth { border: 1px dashed var(--bord); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.ml-oauth b { display: inline-flex; align-items: center; gap: 6px; }
.ml-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ml-code code { font: 700 1.4rem ui-monospace, Consolas, monospace; letter-spacing: .12em; padding: 6px 12px; border-radius: 8px; background: var(--ml-fond); color: var(--ml-c); }
.ml-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-actions .btn, .ml-barre .btn, .ml-pieces .btn, .ml-ranger .btn { display: inline-flex; align-items: center; gap: 6px; }
.ml-danger { color: #b42318; }
.ml-d-liste { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.ml-d-ligne, .ml-d-ajout { display: flex; align-items: center; gap: 10px; }
.ml-d-ligne > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-d-ligne select, .ml-d-ajout select { max-width: 240px; }

/* messages : dossiers | liste | lecture */
.ml-messages { flex: 1; min-height: 0; display: grid; grid-template-columns: 170px minmax(240px, 340px) minmax(0, 1fr); }
.ml-messages.is-pop { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); }
.ml-dossiers { min-height: 0; overflow: auto; padding: 8px 6px; border-right: 1px solid var(--bord); display: flex; flex-direction: column; gap: 2px; }
.ml-dossier { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; margin: 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: .84rem; cursor: pointer; text-align: left; }
.ml-dossier span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-dossier:hover { background: var(--neutre); }
.ml-dossier.is-actif { background: var(--ml-fond); color: var(--ml-c); font-weight: 700; }
.ml-liste { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--bord); }
.ml-recherche { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px; border-bottom: 1px solid var(--bord); }
.ml-loupe { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: 1px solid var(--bord); border-radius: 8px; color: var(--doux); }
.ml-loupe input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--texte); }
.ml-filtre { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; }
.ml-ecrire { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; min-height: 0; font-size: .8rem; }
.ml-liste-corps { flex: 1; min-height: 0; overflow: auto; }
.ml-msg { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; margin: 0; border: 0; border-bottom: 1px solid #eef2f6; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.ml-msg:hover { background: #f8fafc; }
.ml-msg.is-actif { background: var(--ml-fond); box-shadow: inset 3px 0 0 var(--ml-c); }
.ml-msg-l1 { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; }
.ml-msg-l1 b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-msg.is-nonlu .ml-msg-l1 b, .ml-msg.is-nonlu .ml-msg-l2 { font-weight: 700; }
.ml-msg-l1 time { flex: none; color: var(--doux); font-size: .74rem; font-variant-numeric: tabular-nums; }
.ml-msg-l2 { display: flex; align-items: center; gap: 4px; color: var(--doux); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-plus { margin: 8px; }
.ml-lecture { min-width: 0; min-height: 0; overflow: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ml-barre { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 0; background: var(--carte); border-bottom: 1px solid var(--bord); }
.ml-barre select { max-width: 200px; height: 32px; padding: 0 8px; }
.ml-lu-tete h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.ml-lu-tete p { margin: 0 0 2px; font-size: .84rem; overflow-wrap: anywhere; }
.ml-pieces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--bord); border-radius: 10px; }
.ml-pieces > b { display: inline-flex; align-items: center; gap: 4px; flex-basis: 100%; font-size: .8rem; }
.ml-piece { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--neutre); font-size: .78rem; }
.ml-ranger { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; align-items: end; padding-top: 8px; }
.ml-r-choix { display: block; width: 100%; margin: 2px 0 0; padding: 4px 8px; border: 1px solid var(--bord); border-radius: 6px; background: none; text-align: left; font: inherit; font-size: .8rem; cursor: pointer; }
.ml-r-choix.is-actif { border-color: var(--ml-c); background: var(--ml-fond); color: var(--ml-c); }
.ml-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .88rem/1.5 inherit; }
.ml-ecriture { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ml-zone { min-height: 180px; resize: vertical; font: inherit; }
.ml-confirme { background: #b45309; border-color: #b45309; }

@media (max-width: 900px) {
  .ml { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ml-cote { border-right: 0; border-bottom: 1px solid var(--bord); max-height: 220px; }
  .ml-messages, .ml-messages.is-pop { grid-template-columns: minmax(0, 1fr); }
  .ml-dossiers { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--bord); }
  .ml-dossier { width: auto; flex: none; }
  .ml-liste { border-right: 0; max-height: 50vh; }
}

/* Les champs : même allure que les listes de choix (la classe dad-input n'est stylée que dans le concepteur). */
.ml .ml-in { width: 100%; box-sizing: border-box; min-height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; color: var(--texte); font: inherit; font-size: .95rem; }
.ml textarea.ml-in { padding: 10px 12px; line-height: 1.5; }
.ml .ml-in:focus { outline: none; border-color: var(--ml-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-c) 18%, transparent); }
.ml .ml-in:disabled { background: #f5f7f9; color: var(--doux); }
.ml .ml-loupe .ml-in { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ml .ml-barre select.ml-in, .ml .ml-d-ligne select.ml-in, .ml .ml-d-ajout select.ml-in { min-height: 34px; width: auto; }
.ml-grille { align-items: end; }
.ml-reglages > .ml-grille:nth-of-type(2) { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-width: 980px; }

/* Certificat auto-signé : montré au refus du test, épinglé par le gérant (odesa-mail.js certHtml). */
.ml-cert { border: 1px solid #f5c26b; background: #fff8eb; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ml-cert > b { display: inline-flex; align-items: center; gap: 6px; color: #9a5b00; }
.ml-cert p { margin: 0; font-size: .82rem; color: #6b4a14; }
.ml-cert dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: .8rem; }
.ml-cert dt { color: #8a6a2c; }
.ml-cert dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
.ml-cert .btn { align-self: flex-start; }
.ml-petit { padding: 2px 8px; font-size: .75rem; }

/* Courrier 2.0 (odesa-mail-2.js) : serveurs, boîtes, remise à zéro. */
.ml-pt.is-sync { background: #0ea5e9; } .ml-pt.is-err { background: #dc2626; }
.ml-rz { flex: none; border-top: 1px solid var(--bord); padding: 8px 12px; font-size: .82rem; }
.ml-rz summary { cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--doux); font-weight: 600; list-style: none; }
.ml-rz summary::-webkit-details-marker { display: none; }
.ml-rz[open] { display: flex; flex-direction: column; gap: 8px; }
.ml-rz .ml-case { align-items: flex-start; font-size: .8rem; }
.ml-rz .btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.ml-n-titre { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: var(--texte); }
.ml-n-adresse { display: flex; align-items: flex-end; gap: 10px; max-width: 640px; }
.ml-n-adresse .ml-champ { flex: 1; }
.ml-n-adresse .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; }
.ml-n-src { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--ml-fond); color: var(--ml-c); }
.ml-n-src.is-aucune, .ml-n-src.is-essai { background: #fff8eb; color: #9a5b00; }
.ml-repris { color: #15803d; }
.ml-dossier small { margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--ml-c); color: #fff; font-size: .7rem; font-weight: 700; }
.ml-st { flex: none; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: .7rem; font-weight: 700; background: #e0f2fe; color: #0369a1; }
.ml-st.is-echec { background: #fef2f2; color: #b42318; } .ml-st.is-annule { background: var(--neutre); color: var(--doux); }
.ml-msg.is-efface { opacity: .6; }
.ml-b-liste { display: flex; flex-direction: column; gap: 6px; max-width: 980px; }
.ml-b-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto auto; align-items: center; gap: 10px; padding: 8px 10px 8px calc(10px + var(--prof, 0) * 18px); border: 1px solid var(--bord); border-radius: 10px; }
.ml-b-ligne.is-disparue { grid-template-columns: minmax(0, 1fr) 180px auto auto; background: #f8fafc; color: var(--doux); border-style: dashed; }
.ml-b-nom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ml-b-nom > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ml-b-nom b, .ml-b-nom small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-b-nom small { color: var(--doux); font-size: .74rem; display: inline-flex; align-items: center; gap: 3px; }
.ml-b .ml-b-ligne select.ml-in { min-height: 34px; }
.ml-b-sync { font-size: .8rem; white-space: nowrap; }
.ml-b-act { display: inline-flex; gap: 2px; }
.ml-b-titre { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: .92rem; }
@media (max-width: 900px) { .ml-b-ligne, .ml-b-ligne.is-disparue { grid-template-columns: minmax(0, 1fr) auto; } .ml-n-adresse { flex-direction: column; align-items: stretch; } }
/* Gmail par mot de passe d'application (odesa-mail-2.js, gmailHtml) : trois étapes numérotées. */
.ml-g-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.ml-g-etapes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--bord); border-radius: 10px; }
.ml-g-etapes p { margin: 0 0 8px; }
.ml-g-etapes .ml-champ { margin: 0; }
.ml-g-n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--ml-fond); color: var(--ml-c); }
.ml-g-etapes a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ml-g-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; }