/* ═══ BOÎTE MAIL « A · COMME OUTLOOK » (mail-o/mo.js, 16/10/2026) — le volet des dossiers à gauche ═══════════════════════
   Tout est sous « .mail4.mb.mo » (classe posée par mo.js), « .movolet », « .mopop », « .momod » : sans le script, rien ne change.
   Tailles du volet de Mail (Apple), demandées par le user : 258 px de large, lignes de 30 px, texte 13,5 px, icônes 16 px,
   titres de section en 11,5 px gris (650), compteurs en pastille grise arrondie ; 38 px de haut sur téléphone.
   Couleurs = jetons du hub et de la boîte v3 (--surface, --ink, --v3p, --v3lave…) : le thème sombre suit sans règle en double.
   Règles du user : aéré ; rien ne bouge au survol (couleur seulement) ; aucun texte coupé ni chevauché ; pas de défilement
   horizontal. ⚠️ « !important » et sélecteurs renforcés sur la grille : mb.css en pose plusieurs, plus précis les uns que les autres. */

/* ── la grille : volet | liste | lecture ; la barre à onglets et la barre des favoris de mb.js laissent leur place ── */
/* 17/10 · « une plus grosse vue sur les mails » : la liste par défaut s'élargit (≈ 520 px à 1440) ; la poignée (mo.js) la règle */
body.mo-on{--mo-w:258px;--mo-l:clamp(400px,36vw,620px)}
@media(max-width:1280px){ body.mo-on{--mo-w:248px;--mo-l:clamp(340px,32vw,420px)} }
@media(max-width:1100px){ body.mo-on{--mo-w:258px} }
html body.mo-on .mail4.mb.mo.mo.mo,html body.mo-on.rail .mail4.mb.mo.mo.mo,html body.mo-on .mail4.mb.mo.mo.mo.ctxon,html body.mo-on .mail4.mb.mo.mo.mo.mbcompact{
  grid-template-columns:var(--mo-w) var(--mo-l) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
html body.mo-on .mail4.mb.mo.mo.mo.mbcompact{--mo-l:clamp(340px,32vw,540px)}
html body.mo-on .mail4.mb.mo.mo.mo.mocache{grid-template-columns:var(--mo-l) minmax(0,1fr)!important}
.mail4.mb.mo>.mbbar,.mail4.mb.mo>.mbfavs{display:none!important}
.mail4.mb.mo>.movolet{grid-column:1;grid-row:1}
.mail4.mb.mo>.mliste2{grid-column:2;grid-row:1}
.mail4.mb.mo>.mlect2{grid-column:3;grid-row:1}
.mail4.mb.mo.mocache>.movolet{display:none}
/* 27/10 · vue « Sans volet » (Réglages › Boîte mail) : ☰ ouvre les dossiers en tiroir par-dessus, sans changer la vue */
.mail4.mb.mo.mocache>.movolet.open{display:flex;position:fixed;left:0;top:0;bottom:0;z-index:1200;width:min(300px,88vw);border-radius:0 18px 18px 0;box-shadow:12px 0 40px -12px rgba(0,0,0,.35)}
.movoile.motiroirv{z-index:1190}
.mail4.mb.mo.mocache>.mliste2{grid-column:1}
.mail4.mb.mo.mocache>.mlect2{grid-column:2}
/* jusqu'à 1100 px le message s'ouvre dans la fenêtre du hub : le volet et la liste */
@media(max-width:1100px){
  html body.mo-on .mail4.mb.mo.mo.mo,html body.mo-on.rail .mail4.mb.mo.mo.mo,html body.mo-on .mail4.mb.mo.mo.mo.ctxon,html body.mo-on .mail4.mb.mo.mo.mo.mbcompact{grid-template-columns:var(--mo-w) minmax(0,1fr)!important}
  html body.mo-on .mail4.mb.mo.mo.mo.mocache{grid-template-columns:minmax(0,1fr)!important}
  .mail4.mb.mo>.mlect2{grid-column:2}
  .mail4.mb.mo.mocache>.mlect2{grid-column:1}
}
/* « Agrandir la lecture » : le message ouvert prend toute la place (le volet aussi s'efface) */
html body.mo-on.mlarge .mail4.mb.mo.mo.mo:has(.m3read .mdoc){grid-template-columns:minmax(0,1fr)!important}
body.mo-on.mlarge .mail4.mb.mo:has(.m3read .mdoc)>.movolet{display:none}
body.mo-on.mlarge .mail4.mb.mo:has(.m3read .mdoc)>.mlect2{grid-column:1/-1!important}

/* ── le volet ── */
.mail4.mb.mo>.movolet{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);border-radius:18px;box-shadow:var(--v3ombre);overflow:hidden;color:var(--ink2)}
.movolet .mo-hd{flex:none;display:flex;align-items:center;gap:6px;padding:12px 12px 8px 8px}
.movolet .mo-nouv{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 12px;border:0;border-radius:11px;
  background:var(--v3p);color:#fff;font:inherit;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s}
.movolet .mo-nouv:hover{background:var(--v3p2)}
.movolet .mo-nouv span{overflow:hidden;text-overflow:ellipsis}
.mo-ib{width:34px;height:34px;display:grid;place-items:center;flex:none;padding:0;margin:0;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.mo-ib:hover{background:var(--v3lave);color:var(--ink)}
svg.moi{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.moi.xs{width:13px;height:13px;stroke-width:2.2}
.mo-ib svg.moi{width:18px;height:18px}
.movolet .mo-corps{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 8px 18px;overscroll-behavior:contain}
.movolet .mo-vide{margin:10px 8px;font-size:13px;line-height:1.5;color:var(--muted)}
/* titres de section : « Favoris », l'adresse de la boîte (repliables) */
.movolet .mo-sec{display:flex;align-items:center;gap:6px;width:100%;min-height:24px;padding:3px 8px;margin:14px 0 2px;border:0;border-radius:8px;background:none;
  color:var(--muted);font:inherit;font-size:11.5px;font-weight:650;line-height:1.35;text-align:left;cursor:pointer;transition:background-color .15s}
.movolet .mo-corps>.mo-sec:first-child{margin-top:2px}
.movolet .mo-sec:hover{background:var(--v3lave)}
.movolet .mo-sec .mo-nm{flex:1;min-width:0;overflow-wrap:anywhere}
/* une ligne de dossier : 30 px, 13,5 px, icônes 16 px, retrait de 16 px par niveau */
.movolet .mo-f,.momod .mo-f{display:flex;align-items:center;gap:7px;min-height:30px;padding:3px 4px 3px calc(2px + var(--n,0)*16px);border-radius:8px;
  color:var(--ink2);font-size:13.5px;line-height:1.3;cursor:pointer;position:relative;transition:background-color .12s}
.movolet .mo-f:hover,.momod .mo-f:hover{background:var(--v3lave)}
.movolet .mo-f.on,.momod .mo-f.on{background:var(--v3teinte);color:var(--ink);font-weight:600}
.movolet .mo-f:focus-visible,.momod .mo-f:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mo-f .mo-tg{width:16px;height:16px;display:grid;place-items:center;flex:none;padding:0;margin:0;border:0;border-radius:4px;background:none;color:var(--muted);cursor:pointer}
.mo-f .mo-tg:hover{background:var(--v3teinte);color:var(--ink)}
.mo-f .mo-tg.mo-sans{visibility:hidden}
.mo-f .mo-fi{display:grid;place-items:center;flex:none;color:var(--muted)}
.mo-f.on .mo-fi{color:var(--v3pt)}
.mo-f .mo-nm{flex:1;min-width:0;overflow-wrap:break-word}
.mo-f .mo-nm small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.35}
.movolet .mo-f.nl .mo-nm{font-weight:650;color:var(--ink)}
/* le compteur et « ⋯ » dans la même case : au survol l'un remplace l'autre, le nom ne bouge pas */
.mo-f .mo-dr{display:grid;justify-items:end;align-items:center;flex:none;min-width:24px}
.mo-f .mo-dr>*{grid-area:1/1}
.mo-f .mo-u,.mo-f .mo-t{min-width:24px;padding:0 6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 6.5%,transparent);font-size:11px;font-weight:650;line-height:18px;text-align:center;color:var(--v3pt);white-space:nowrap}
.mo-f .mo-t,.mo-f .mo-u.mo-som{color:var(--muted)}
.mo-f .mo-plus{width:24px;height:24px;display:grid;place-items:center;padding:0;margin:0;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer;visibility:hidden;transition:background-color .15s,color .15s}
.mo-f .mo-plus:hover{background:var(--surface);color:var(--ink)}
.mo-f:hover .mo-plus,.mo-f.menu .mo-plus,.mo-f:focus-within .mo-plus{visibility:visible}
.mo-f:hover .mo-dr>span,.mo-f.menu .mo-dr>span,.mo-f:focus-within .mo-dr>span{visibility:hidden}
@media(hover:none){ .mo-f .mo-dr{display:flex;gap:4px} .mo-f .mo-plus{visibility:visible} .mo-f .mo-dr>span{visibility:visible!important} }
/* créer / renommer sur place */
.mo-f.mo-edit{cursor:default}
.mo-f.mo-edit:hover{background:none}
.mo-f.mo-edit input{flex:1;min-width:0;height:26px;padding:0 8px;margin:0;border:1.5px solid var(--accent);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;outline:0;box-shadow:none}
.mo-f.mo-edit input[readonly]{opacity:.6}
.mo-err{padding:1px 8px 6px calc(48px + var(--n,0)*16px);font-size:12px;line-height:1.4;color:var(--danger,#cf3f3f);overflow-wrap:break-word}
.mo-err.mo-attente{color:var(--muted)}
.movolet .mo-creer{display:flex;align-items:center;gap:8px;width:100%;min-height:30px;margin-top:6px;padding:3px 8px 3px 28px;border:0;border-radius:8px;background:none;
  color:var(--v3pt);font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;transition:background-color .15s}
.movolet .mo-creer:hover{background:var(--v3lave)}
/* glisser */
.movolet .mo-f.mo-drop{background:var(--v3p)!important;color:#fff}
.movolet .mo-f.mo-drop *{color:#fff!important}
.movolet .mo-f.mo-avant{box-shadow:inset 0 2px 0 var(--accent)}
.movolet .mo-sec.mo-zone{box-shadow:inset 0 0 0 2px var(--accent)}
.movolet .mo-f.mo-source{opacity:.45}
/* le pied : la place, la gestion, les rangements automatiques, l'assistant, les raccourcis */
.movolet .mo-pied{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;padding:8px 8px 10px;border-top:1px solid var(--v3ligne,var(--line))}
.movolet .mo-pied .mbjauge{margin:0 0 4px;padding:8px 10px;height:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.movolet .mo-lien{display:inline-flex;align-items:center;gap:7px;min-height:30px;max-width:100%;padding:3px 8px;margin:0;border:0;border-radius:8px;background:none;
  color:var(--muted);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;transition:background-color .15s,color .15s}
.movolet .mo-lien:hover{background:var(--v3lave);color:var(--ink)}
.movolet .mo-lien svg.moi{width:15px;height:15px}
.movolet .mo-lien span{min-width:0;overflow-wrap:break-word}
.movolet .mo-lien em{font-style:normal;min-width:20px;padding:0 6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 6.5%,transparent);font-size:11px;font-weight:650;line-height:18px;text-align:center}

/* ── en tête de la liste : ☰ (volet masqué), la recherche du hub ; puis le nom du dossier, l'étoile, « Filtre ▾ » ── */
html body.mo-on .mail4.mb.mo .mltete{padding:12px 14px 4px!important;gap:6px}
.mail4.mb.mo .mltete>.mo-burger{order:0}
.mail4.mb.mo .mltete>.mrech{order:1;flex:1 1 160px;min-width:0;margin:0!important}
.mail4.mb.mo .mltete>.mo-saut{order:2;flex:1 0 100%;height:0}
.mail4.mb.mo .mltete>h1>.mtit{order:3}
.mail4.mb.mo .mltete>.motete{order:4;flex:1 0 100%;display:flex;align-items:center;gap:2px;min-width:0;min-height:40px}
.mail4.mb.mo .mltete>.mrechx{order:5}
.mail4.mb.mo .mltete>h1>.mbasc{display:none!important}   /* Messages | Personnes : dans « Filtre ▾ » */
.mail4.mb.mo .motete .mo-tnom{flex:0 1 auto;min-width:0;margin:0;padding:0 2px 0 4px;font:700 18px/1.3 "Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
.mail4.mb.mo .motete .mo-sp{flex:1 1 auto;min-width:4px}
.mail4.mb.mo .motete .mo-etoile.on{color:#c98a12}
.mail4.mb.mo .motete .mo-etoile.on svg{fill:currentColor}
.mo-filtre{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;margin:0;border:0;border-radius:9px;background:none;color:var(--ink2);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;flex:none;cursor:pointer;transition:background-color .15s,color .15s}
.mo-filtre:hover{background:var(--v3lave)}
.mo-filtre.actif{background:var(--v3teinte);color:var(--v3pt)}
/* Tous / Non lus : dans « Filtre ▾ » ; le reste de la ligne des filtres du hub reste là (À relancer, Aller à…, densité, tout sélectionner) */
.mail4.mb.mo .mfilt>[data-mailf=""],.mail4.mb.mo .mfilt>[data-mailf="nonlu"]{display:none!important}

/* ── la barre du message : « Déplacer vers ▾ » à la place de « Ranger », « Balayer » ── */
.mail4.mb.mo .moutils .mbranger,body.mo-on #modalBox .mlact .mbranger{display:none!important}
.mail4.mb.mo .moutils .modep{background:var(--v3lave);color:var(--v3pt);font-weight:600}
.mail4.mb.mo .moutils .modep:hover{background:var(--v3teinte)}
.mail4.mb.mo .moutils .modep svg.moi.xs{width:12px;height:12px;margin-left:-3px;opacity:.75}
.mail4.mb.mo .moutils .mobal svg.moi,.mail4.mb.mo .moutils .modep svg.moi:first-child{width:15px;height:15px}
.mail4.mb.mo .moutils [data-mobal][hidden],#modalBox .mlact [data-mobal][hidden]{display:none!important}
@container barrelect (min-width:876px){ .mail4.mb.mo .moutils .modep span{display:inline!important} }
/* barre étroite : « Balayer » passe dans « Déplacer vers ▾ » (la barre reste sur une ligne, le geste reste à un clic de plus) */
@container barrelect (max-width:620px){ .mail4.mb.mo .moutils .mobal{display:none!important} }
#modalBox .mlact .modep svg.moi.xs{width:12px;height:12px;opacity:.75}

/* ── menus et « Déplacer vers ▾ » (posés sur la page) ── */
.mopop{position:fixed;z-index:1360;display:flex;flex-direction:column;width:300px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 24px));padding:8px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:15px;box-shadow:0 2px 6px rgba(13,42,41,.08),0 30px 64px -16px rgba(13,42,41,.32);font-size:13.5px}
.mopop.mo-menu{width:264px}
.mopop.mo-dep{width:340px}
.mopop.mo-regles{width:360px}
.mopop button{font:inherit}
.mo-ph{flex:none;padding:6px 8px 8px}
.mo-ph b{display:block;font:700 15.5px/1.3 "Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
.mo-ph small{display:block;margin-top:2px;font:400 12.5px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--muted);overflow-wrap:anywhere}
.mo-pb{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px}
.mo-it{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;margin:0;border:0;border-radius:9px;background:none;color:var(--ink2);font-size:13.5px;line-height:1.3;text-align:left;cursor:pointer;transition:background-color .12s}
.mo-it:hover,.mo-it:focus-visible{background:var(--v3lave);outline:0}
.mo-it .mo-nm{flex:1;min-width:0;overflow-wrap:break-word}
.mo-it .mo-nm small{display:block;font-size:11.5px;color:var(--muted)}
.mo-it .mo-fi{display:grid;place-items:center;flex:none;color:var(--muted)}
.mo-it.danger{color:var(--danger,#cf3f3f)}
.mo-it[disabled]{opacity:.45;cursor:not-allowed}
.mo-it[aria-checked="true"]{color:var(--ink);font-weight:600}
.mo-msep{display:block;height:1px;margin:6px 4px;background:var(--line)}
.mo-g2{padding:10px 10px 4px;font-size:11.5px;font-weight:650;color:var(--muted)}
.mo-champ{display:flex;align-items:center;gap:8px;min-height:38px;margin:0 2px 6px;padding:0 10px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--muted)}
.mo-champ:focus-within{border-color:var(--accent)}
.mo-champ input{flex:1;min-width:0;height:36px;padding:0;margin:0;border:0;background:none;outline:0;box-shadow:none;font:inherit;font-size:13.5px;color:var(--ink)}
.mo-rien{margin:0;padding:10px;font-size:13px;line-height:1.45;color:var(--muted)}
.mo-rg{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px}
.mo-rg .mo-nm{flex:1;min-width:0;overflow-wrap:break-word}
.mo-rg .mo-nm b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.mo-rg .mo-nm small{display:block;font-size:12px;color:var(--muted)}
@media(max-width:760px),(max-height:500px) and (max-width:1100px){
  .mopop.feuille{left:0!important;right:0;bottom:0;top:auto!important;width:100%;max-width:none;max-height:82vh;border-radius:20px 20px 0 0;padding:12px 12px 20px}
}

/* ── les fenêtres (déplacer, copier, balayer, confirmer) ── */
.movoile{position:fixed;inset:0;z-index:1340;background:rgba(13,42,41,.28)}
.momod{position:fixed;left:50%;top:50%;z-index:1350;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:min(480px,calc(100vw - 24px));max-height:min(660px,calc(100vh - 40px));
  background:var(--surface);color:var(--ink);border-radius:16px;box-shadow:0 2px 6px rgba(13,42,41,.08),0 30px 64px -16px rgba(13,42,41,.36)}
.momod button,.momod input,.momod select{font:inherit}
.mo-mh{flex:none;display:flex;align-items:flex-start;gap:12px;padding:20px 18px 8px 22px}
.mo-mh h3{flex:1;min-width:0;margin:0;font:700 19px/1.3 "Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
.mo-mh small{display:block;margin-top:4px;font:400 13px/1.45 "IBM Plex Sans",system-ui,sans-serif;color:var(--muted);overflow-wrap:anywhere}
.mo-mrech{flex:none;padding:6px 20px 6px}
.mo-mb{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 14px 10px}
.mo-mb p{margin:0;padding:0 8px 8px;font-size:14px;line-height:1.55;color:var(--ink2);overflow-wrap:break-word}
.mo-mb p.mo-note{font-size:12.5px;color:var(--muted);padding-top:6px}
.mo-mb .mo-adr{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.mo-merr{margin:0;padding:0 22px 8px;font-size:13px;line-height:1.45;color:var(--danger,#cf3f3f);overflow-wrap:break-word}
.mo-mb .mo-merr{padding:4px 8px 0}
.mo-mf{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 16px 22px;border-top:1px solid var(--line)}
.mo-mf .mo-sp{flex:1}
.mo-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;margin:0;border:1px solid var(--line2);border-radius:11px;background:var(--surface);color:var(--ink2);
  font-size:13.5px;font-weight:550;white-space:nowrap;flex:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.mo-btn:hover{background:var(--v3lave)}
.mo-btn.p{background:var(--v3p);border-color:var(--v3p);color:#fff;font-weight:600}
.mo-btn.p:hover{background:var(--v3p2);border-color:var(--v3p2)}
.mo-btn.p.danger{background:var(--danger,#cf3f3f);border-color:var(--danger,#cf3f3f)}
.mo-btn[disabled]{opacity:.45;cursor:not-allowed}
.mo-btn svg.moi{width:16px;height:16px}
.momod .mo-f.off{opacity:.45;cursor:not-allowed}
.mo-radio{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:9px;font-size:14px;line-height:1.45;color:var(--ink2);cursor:pointer;transition:background-color .12s}
.mo-radio:hover{background:var(--v3lave)}
.mo-radio input{margin:3px 0 0;accent-color:var(--v3p);flex:none}
.mo-radio span{flex:1;min-width:0;overflow-wrap:break-word}
.mo-vers{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 8px 4px;font-size:14px;font-weight:600;color:var(--ink2)}
.mo-vers select{flex:1 1 200px;min-width:0;max-width:100%;height:40px;padding:0 10px;border:1px solid var(--line2);border-radius:11px;background:var(--surface);color:var(--ink);font-size:14px}
.mo-regle{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 8px;padding:10px 12px;border-radius:12px;background:var(--v3lave);font-size:13px;line-height:1.45;color:var(--ink2)}
.mo-regle>span{flex:1 1 200px;min-width:0;overflow-wrap:break-word}
.mo-regle svg.moi{color:var(--v3pt)}
.mo-regle .mo-btn{height:32px;padding:0 12px}
@media(max-width:760px),(max-height:500px) and (max-width:1100px){
  .momod{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-width:none;max-height:86vh;border-radius:20px 20px 0 0}
}

/* ── téléphone (≤ 760 px) : le volet devient un tiroir, ouvert par ☰ ; lignes de 38 px ── */
@media(max-width:760px),(max-height:500px) and (max-width:1100px){
  html body.mo-on .mail4.mb.mo.mo.mo,html body.mo-on.rail .mail4.mb.mo.mo.mo,html body.mo-on .mail4.mb.mo.mo.mo.ctxon,html body.mo-on .mail4.mb.mo.mo.mo.mbcompact,html body.mo-on .mail4.mb.mo.mo.mo.mocache{grid-template-columns:minmax(0,1fr)!important}
  .mail4.mb.mo>.mliste2,.mail4.mb.mo>.mlect2,.mail4.mb.mo.mocache>.mliste2,.mail4.mb.mo.mocache>.mlect2{grid-column:1}
  .mail4.mb.mo>.movolet{display:none}
  .mail4.mb.mo>.movolet.open{display:flex;position:fixed;left:0;top:0;bottom:0;z-index:1200;width:min(330px,88vw);border-radius:0 18px 18px 0;box-shadow:12px 0 40px -12px rgba(0,0,0,.35)}
  .movoile.motiroirv{z-index:1190}
  .movolet .mo-hd{padding:14px 12px 10px 10px}
  .movolet .mo-f{min-height:38px;font-size:14px}
  .movolet .mo-sec{min-height:30px}
  .mo-f .mo-plus{width:30px;height:30px}
  .mo-f .mo-dr{display:flex;gap:4px} .mo-f .mo-plus{visibility:visible} .mo-f .mo-dr>span{visibility:visible!important}
}

/* 17/10 · la poignée entre la liste et la lecture (comme Outlook) : un filet qui s'épaissit au survol, rien ne bouge */
.mail4.mb.mo>.mliste2>.mo-poignee{position:absolute;top:12px;bottom:12px;right:0;width:10px;cursor:col-resize;z-index:5;border-radius:6px;touch-action:none}
.mail4.mb.mo>.mliste2>.mo-poignee::after{content:"";position:absolute;top:50%;right:3px;width:2px;height:44px;margin-top:-22px;border-radius:2px;background:transparent;transition:background-color .15s}
.mail4.mb.mo>.mliste2>.mo-poignee:hover::after,.mail4.mb.mo>.mliste2>.mo-poignee.tire::after,.mail4.mb.mo>.mliste2>.mo-poignee:focus-visible::after{background:var(--accent,#107a74)}
.mail4.mb.mo>.mliste2>.mo-poignee:focus-visible{outline:none}
body.mo-tire,body.mo-tire *{cursor:col-resize!important;user-select:none!important}
@media(max-width:1100px){ .mail4.mb.mo>.mliste2>.mo-poignee{display:none} }

/* ═══ 18/10 · BOÎTE AÉRÉE (proposition 2 retenue par le user : « la 2 ») ══════════════════════════════════════════════════
   · une seule feuille blanche : plus de cartes ni de gris entre volet, liste et lecture — des filets ;
   · volet 280 px, lignes 38 px, sections espacées ; liste sans cartes, lignes hautes ; lecture 44/56 px ;
   · un message ouvert : le volet passe en RAIL d'icônes (76 px, les Favoris), il se déplie AU-DESSUS de la liste au survol, au
     clavier et pendant qu'on glisse un mail (rien ne bouge dessous) ;
   · l'étoile des Favoris au survol de chaque dossier ; la vignette du glisser ; le dossier qui « avale » le mail lâché.
   Maquettes et captures : conception/mail-aere/. */
html body.mo-on .mail4.mb.mo.mo.mo{background:var(--surface)!important;gap:0!important;padding:0!important;border-radius:0!important;border:0!important}
html body.mo-on .mail4.mb.mo>.movolet,html body.mo-on .mail4.mb.mo>.mliste2,html body.mo-on .mail4.mb.mo>.mlect2{border-radius:0!important;box-shadow:none!important}
html body.mo-on .mail4.mb.mo>.movolet{background:color-mix(in srgb,var(--ink) 2.2%,var(--surface))!important;border-right:1px solid color-mix(in srgb,var(--line2) 70%,transparent)}
html body.mo-on .mail4.mb.mo.mo.mo>.mliste2,html body.mo-on .mail4.mb.mo.mo.mo .mrows{background:var(--surface)!important}
html body.mo-on .mail4.mb.mo.mo.mo>.mliste2{border-right:1px solid color-mix(in srgb,var(--line2) 70%,transparent)}
html body.mo-on .mail4.mb.mo .mrows .mjour{background:var(--surface)!important}
@media(min-width:1281px){ body.mo-on{--mo-w:280px} }
/* le volet */
html body.mo-on .movolet .mo-hd{padding:24px 20px 12px}
html body.mo-on .movolet .mo-nouv{height:44px;border-radius:12px}
html body.mo-on .movolet .mo-corps{padding:6px 14px 32px}
html body.mo-on .movolet .mo-sec{margin:28px 0 8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
html body.mo-on .movolet .mo-corps>.mo-sec:first-child{margin-top:8px}
html body.mo-on .movolet .mo-f{min-height:38px;gap:11px;font-size:14px;padding-right:8px;border-radius:10px}
html body.mo-on .movolet .mo-pied{padding:12px 16px 16px;gap:2px 6px}
html body.mo-on .movolet .mo-pied .mbjauge{margin:0 0 8px;padding:10px 12px;border-color:color-mix(in srgb,var(--line2) 70%,transparent)}
/* la liste */
@media(min-width:761px){
  html body.mo-on .mail4.mb.mo .mltete{padding:24px 30px 8px}
  html body.mo-on .mail4.mb.mo .mfilt{padding:4px 22px 14px 24px!important}
  html body.mo-on .mail4.mb.mo .mbsyncz{padding:8px 30px 6px}
  html body.mo-on .mail4.mb.mo .mrows{padding:0 0 56px}
  html body.mo-on .mail4.mb.mo .mrows .mjour{padding:32px 30px 10px}
  html body.mo-on .mail4.mb.mo .mrow2{padding:20px 30px 20px 34px!important;margin:0!important;border-radius:0!important;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--line2) 55%,transparent)}
}
html body.mo-on .mail4.mb.mo .mrow2,html body.mo-on .mail4.mb.mo .mrow2.nl{background:var(--surface)!important}
html body.mo-on .mail4.mb.mo .mrow2:hover{background:color-mix(in srgb,var(--ink) 3%,var(--surface))!important}
html body.mo-on .mail4.mb.mo .mrow2.on,html body.mo-on .mail4.mb.mo .mrow2[aria-current],html body.mo-on .mail4.mb.mo .mrow2.sel{background:var(--v3teinte)!important}
html body.mo-on .mail4.mb.mo .mrow2 .ap{margin-top:6px;line-height:1.55}
/* la lecture */
@media(min-width:1101px){ html body .mail4.mb .m3read .mdoc{padding:44px 56px 72px!important} }
html body .mail4.mb .m3read .mdoc .mcorps,html body .mail4.mb .m3read .mdoc .mtexte{font-size:15.5px;line-height:1.8;max-width:68ch}

/* le RAIL : seulement quand la lecture est dans la page (> 1 100 px), volet affiché, pas en « Agrandir la lecture » */
@media(min-width:1101px){
  html body.mo-on .mail4.mb.mo.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc){grid-template-columns:76px var(--mo-l) minmax(0,1fr)!important}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet{position:relative;z-index:30;width:76px;transition:width .18s ease,box-shadow .18s ease}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:is(:hover,:focus-within,.mo-glisse){width:280px;box-shadow:14px 0 34px -14px rgba(13,42,41,.24)!important}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) :is(.mo-nouv span,.mo-nm,.mo-tg,.mo-sec,.mo-pied,.mo-creer,.mo-act,.mo-t,.mo-vide),
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps>div:not(.mo-gfav):not(.mo-gcpt),
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-hd>:not(.mo-nouv){display:none!important}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-hd{padding:24px 16px 14px}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-nouv{flex:none;width:44px;padding:0}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps{padding:6px 12px 24px;overflow:hidden}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-f{justify-content:center;padding:0;margin-bottom:4px;min-height:42px}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-fi svg{width:19px;height:19px}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-dr{position:absolute;top:2px;right:0;min-width:0}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-u{min-width:0;padding:0 5px;font-size:9.5px;line-height:15px;background:var(--v3p);color:#fff}
  .mail4.mb.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-u.mo-som{display:none}
}

/* l'étoile des Favoris et « ⋯ », au survol, à la place du compteur */
.mo-f .mo-dr{position:relative}
/* posés PAR-DESSUS la fin du nom (sans lui prendre de place : « Éléments supprimés » tient sur une ligne) */
.mo-f .mo-dr>.mo-act{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;padding-left:14px;visibility:hidden;
  background:linear-gradient(90deg,transparent,var(--v3lave) 14px)}
.mo-f.on .mo-dr>.mo-act{background:linear-gradient(90deg,transparent,var(--v3teinte) 14px)}
.mo-f:hover .mo-dr>.mo-act,.mo-f.menu .mo-dr>.mo-act,.mo-f:focus-within .mo-dr>.mo-act{visibility:visible}
.mo-f .mo-star{width:24px;height:24px;display:grid;place-items:center;padding:0;margin:0;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.mo-f .mo-star:hover{background:var(--surface);color:#c98a12}
.mo-f .mo-star.on{color:#d89a16}
.mo-f .mo-star.on svg{fill:currentColor}
.mo-f .mo-star svg.moi{width:15px;height:15px}
@media(hover:none){ .mo-f .mo-dr>.mo-act{visibility:visible} }

/* glisser un mail : le volet invite au dépôt, la vignette, le dossier qui reçoit */
.movolet.mo-glisse .mo-f[data-mofp]:not(.mo-drop){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v3p) 14%,transparent)}
.movolet .mo-f.mo-drop{transform:none;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--v3p) 70%,transparent)}
.mo-vign{position:fixed;top:-200px;left:-400px;display:flex;align-items:center;gap:10px;max-width:280px;padding:10px 14px 10px 10px;border-radius:14px;
  background:var(--surface);color:var(--ink);box-shadow:0 10px 28px -10px rgba(13,42,41,.38),0 0 0 1px color-mix(in srgb,var(--v3p) 22%,transparent);font-size:13px;pointer-events:none}
.mo-vign .mo-vi{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--v3p);color:#fff}
.mo-vign .mo-vt{display:grid;min-width:0}
.mo-vign b,.mo-vign small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mo-vign small{color:var(--muted);font-size:12px}
.movolet .mo-f.mo-recu{animation:moRecu 1.3s ease-out}
.movolet .mo-f.mo-recu .mo-fi{animation:moAvale .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes moRecu{0%{background:var(--v3p);color:#fff}30%{background:color-mix(in srgb,var(--v3p) 30%,var(--surface))}100%{background:transparent}}
@keyframes moAvale{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){ .movolet .mo-f.mo-recu,.movolet .mo-f.mo-recu .mo-fi{animation:none} .mail4.mb.mo>.movolet{transition:none!important} }

/* ═══ 18/10 · COULEURS PLUS MARQUÉES (le user : « que les couleurs soient un peu plus marquées dans la boîte mail ») ═══════════
   Une couleur par sorte de dossier (icônes), le dossier ouvert et le message ouvert soulignés d'un trait, les non-lus en turquoise,
   le volet légèrement teinté. Jetons du hub (--v3p, --v3pt) : le thème sombre suit. */
.movolet,.mopop,.momod{--mo-c-inbox:#0f8a83;--mo-c-send:#2f6fd0;--mo-c-pen:#c47f0e;--mo-c-trash:#c2415b;--mo-c-archive:#5b7f3a;--mo-c-ban:#d0601e;--mo-c-reply:#7a4fc9;--mo-c-flag:#d4342f;--mo-c-folder:#5f7f86}
html body.mo-on .mail4.mb.mo>.movolet{background:color-mix(in srgb,var(--v3p) 5%,var(--surface))!important}
.movolet .mo-fi[data-moic] svg{stroke-width:2}
.mo-fi[data-moic=inbox]{color:var(--mo-c-inbox)}
.mo-fi[data-moic=send]{color:var(--mo-c-send)}
.mo-fi[data-moic=pen]{color:var(--mo-c-pen)}
.mo-fi[data-moic=trash]{color:var(--mo-c-trash)}
.mo-fi[data-moic=archive]{color:var(--mo-c-archive)}
.mo-fi[data-moic=ban]{color:var(--mo-c-ban)}
.mo-fi[data-moic=reply]{color:var(--mo-c-reply)}
.mo-fi[data-moic=flag]{color:var(--mo-c-flag)}
.mo-fi[data-moic=folder]{color:var(--mo-c-folder)}
/* le dossier ouvert : fond turquoise franc + trait à gauche */
html body.mo-on .movolet .mo-f.on{background:color-mix(in srgb,var(--v3p) 15%,var(--surface));color:var(--v3pt);box-shadow:inset 3px 0 0 var(--v3p)}
html body.mo-on .movolet .mo-f.on .mo-nm{color:var(--v3pt)}
html body.mo-on .movolet .mo-f:not(.on):hover{background:color-mix(in srgb,var(--v3p) 8%,var(--surface))}
html body.mo-on .movolet .mo-sec{color:var(--v3pt)}
/* compteurs de non-lus : pastille turquoise */
html body.mo-on .movolet .mo-f .mo-u:not(.mo-som){background:color-mix(in srgb,var(--v3p) 16%,var(--surface));color:var(--v3pt)}
html body.mo-on .movolet .mo-f.on .mo-u:not(.mo-som){background:var(--v3p);color:#fff}
/* la liste : non-lus marqués, message ouvert souligné */
html body.mo-on .mail4.mb.mo .mrow2.nl{box-shadow:inset 3px 0 0 var(--v3p),inset 0 -1px 0 color-mix(in srgb,var(--line2) 55%,transparent)!important}
html body.mo-on .mail4.mb.mo .mrow2.nl .de{color:var(--ink);font-weight:700}
html body.mo-on .mail4.mb.mo .mrow2.nl time{color:var(--v3pt);font-weight:700}
html body.mo-on .mail4.mb.mo .mrow2.on{background:color-mix(in srgb,var(--v3p) 12%,var(--surface))!important;box-shadow:inset 4px 0 0 var(--v3p),inset 0 -1px 0 color-mix(in srgb,var(--line2) 55%,transparent)!important}
html body.mo-on .mail4.mb.mo .mrow2.sel{background:color-mix(in srgb,var(--v3p) 8%,var(--surface))!important}
html body.mo-on .mail4.mb.mo .mrow2:not(.on):not(.sel):hover{background:color-mix(in srgb,var(--v3p) 5%,var(--surface))!important}
html body.mo-on .mail4.mb.mo .mrows .mjour{color:var(--v3pt)}

/* ═══ 18/10 · PLUSIEURS BOÎTES : les autres boîtes sous celle qui est ouverte, « Ajouter une boîte » et sa fenêtre ═══ */
.movolet{--mo-c-boite:#2f8f6a}
.mo-fi[data-moic=boite]{color:var(--mo-c-boite)}
.movolet .mo-boites.bas{margin-top:14px}
.movolet .mo-boite.moba{cursor:default;background:color-mix(in srgb,var(--mo-c-boite) 10%,transparent);color:var(--ink);font-weight:600}
.movolet .mo-boite.moba .mo-nm{color:var(--ink)}
.movolet .mo-sect{cursor:default}
.movolet .mo-sect:hover{background:none}

.movolet .mo-boite .mo-nm small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.mo-ajb .mo-lab{display:grid;gap:6px;margin:0 0 14px;padding:0 8px;font-size:13px;font-weight:600;color:var(--ink2)}
.mo-ajb .mo-lab input{height:42px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;font-weight:400}
.mo-ajb .mo-lab input:focus{outline:none;border-color:var(--v3p);box-shadow:0 0 0 3px color-mix(in srgb,var(--v3p) 18%,transparent)}
.mo-ajb .mo-maide{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.movolet .mo-boite .mo-nm{overflow:hidden;overflow-wrap:normal;white-space:nowrap;text-overflow:ellipsis}

/* ═══ 18/10 · ENCORE PLUS MARQUÉ, AVEC DU FONCÉ (le user : « marquer encore un peu plus avec du foncé ») ═══════════════════════
   Le dossier ouvert passe en turquoise FONCÉ plein (texte blanc), les icônes prennent des teintes plus sombres, le volet est plus
   teinté, les titres de section et les non-lus en turquoise foncé ; plus de pied au volet (menu « ⋯ » de l'en-tête). */
.movolet,.mopop,.momod{--mo-c-inbox:#0b6b65;--mo-c-send:#1f4fa3;--mo-c-pen:#9a5f05;--mo-c-trash:#a3243f;--mo-c-archive:#3f6326;--mo-c-ban:#b0470f;--mo-c-reply:#5b34a8;--mo-c-flag:#b3221e;--mo-c-folder:#3d5a61;--mo-c-boite:#1f6e50}
html body.mo-on .mail4.mb.mo>.movolet{background:color-mix(in srgb,var(--v3p) 9%,var(--surface))!important;border-right-color:color-mix(in srgb,var(--v3p) 22%,var(--line2))}
html body.mo-on .movolet .mo-f{color:var(--ink)}
html body.mo-on .movolet .mo-sec{color:var(--v3pt);font-weight:750}
html body.mo-on .movolet .mo-f.on{background:var(--v3pt);color:#fff;box-shadow:none}
html body.mo-on .movolet .mo-f.on .mo-nm,html body.mo-on .movolet .mo-f.on .mo-fi,html body.mo-on .movolet .mo-f.on .mo-tg{color:#fff!important}
html body.mo-on .movolet .mo-f.on .mo-u:not(.mo-som){background:#fff;color:var(--v3pt)}
html body.mo-on .movolet .mo-f.on .mo-dr>.mo-act{background:linear-gradient(90deg,transparent,var(--v3pt) 14px)}
html body.mo-on .movolet .mo-f.on .mo-star,html body.mo-on .movolet .mo-f.on .mo-plus{color:#fff}
html body.mo-on .movolet .mo-f:not(.on):hover{background:color-mix(in srgb,var(--v3p) 16%,var(--surface))}
html body.mo-on .movolet .mo-f .mo-u:not(.mo-som){background:color-mix(in srgb,var(--v3p) 24%,var(--surface));color:var(--v3pt)}
html body.mo-on .movolet .mo-boite.moba{background:color-mix(in srgb,var(--mo-c-boite) 18%,var(--surface))}
html body.mo-on .movolet .mo-hd .mo-ib{color:var(--v3pt)}
/* la liste */
html body.mo-on .mail4.mb.mo .mrow2.nl{box-shadow:inset 4px 0 0 var(--v3pt),inset 0 -1px 0 color-mix(in srgb,var(--line2) 70%,transparent)!important}
html body.mo-on .mail4.mb.mo .mrow2.nl .obj{color:var(--ink);font-weight:650}
html body.mo-on .mail4.mb.mo .mrow2.on{background:color-mix(in srgb,var(--v3p) 20%,var(--surface))!important;box-shadow:inset 5px 0 0 var(--v3pt),inset 0 -1px 0 color-mix(in srgb,var(--line2) 70%,transparent)!important}
html body.mo-on .mail4.mb.mo .mrow2:not(.nl):not(.on){box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--line2) 70%,transparent)!important}
html body.mo-on .mail4.mb.mo .mrows .mjour{color:var(--v3pt);font-weight:750}
/* plus de pied : la place qu'il prenait revient aux dossiers */
html body.mo-on .movolet .mo-corps{padding-bottom:24px}
html body.mo-on .movolet .mo-hd{gap:8px}
html body.mo-on .movolet .mo-hd{padding:24px 12px 12px 10px;gap:4px}
html body.mo-on .movolet .mo-nouv{padding:0 10px;gap:7px}

/* 18/10 · thème SOMBRE : les teintes foncées des dossiers se perdaient sur le fond sombre → versions claires ; le dossier ouvert garde un turquoise
   assez sombre pour son texte blanc (le jeton --v3pt devient CLAIR en sombre) */
:root[data-theme="dark"] .movolet,:root[data-theme="dark"] .mopop,:root[data-theme="dark"] .momod{--mo-c-inbox:#3fcfc6;--mo-c-send:#7aa7f5;--mo-c-pen:#f0b54a;--mo-c-trash:#f2849a;--mo-c-archive:#9fd27a;--mo-c-ban:#f39b62;--mo-c-reply:#b79af2;--mo-c-flag:#f27c76;--mo-c-folder:#9fb7bc;--mo-c-boite:#6fd3a8}
:root[data-theme="dark"] body.mo-on .movolet .mo-f.on{background:color-mix(in srgb,var(--accent,#1da8a6) 62%,#000)}
:root[data-theme="dark"] body.mo-on .movolet .mo-f.on .mo-u:not(.mo-som){background:#fff;color:#0b4f4b}
:root[data-theme="dark"] body.mo-on .movolet .mo-f.on .mo-dr>.mo-act{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent,#1da8a6) 62%,#000) 14px)}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .movolet,:root:not([data-theme="light"]) .mopop,:root:not([data-theme="light"]) .momod{--mo-c-inbox:#3fcfc6;--mo-c-send:#7aa7f5;--mo-c-pen:#f0b54a;--mo-c-trash:#f2849a;--mo-c-archive:#9fd27a;--mo-c-ban:#f39b62;--mo-c-reply:#b79af2;--mo-c-flag:#f27c76;--mo-c-folder:#9fb7bc;--mo-c-boite:#6fd3a8}
:root:not([data-theme="light"]) body.mo-on .movolet .mo-f.on{background:color-mix(in srgb,var(--accent,#1da8a6) 62%,#000)}
:root:not([data-theme="light"]) body.mo-on .movolet .mo-f.on .mo-u:not(.mo-som){background:#fff;color:#0b4f4b}
:root:not([data-theme="light"]) body.mo-on .movolet .mo-f.on .mo-dr>.mo-act{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent,#1da8a6) 62%,#000) 14px)}
}
/* 18/10 · écran tactile (pas de survol) : l'étoile et « ⋯ » restent affichés À CÔTÉ du compteur (posés par-dessus, ils le cachaient) */
@media(hover:none){
  .mo-f .mo-dr{display:flex;align-items:center;gap:2px}
  .mo-f .mo-dr>.mo-act,html body.mo-on .movolet .mo-f.on .mo-dr>.mo-act{position:static;transform:none;padding-left:0;background:none!important}
  .mo-f .mo-dr>span{visibility:visible!important}
}

/* ═══ 21/10/2026 · BOÎTE « LECTURE LARGE » (piste B choisie par le user : « moins buggé, plus lisible, aéré, épuré et dynamique ») ═══
   Une seule feuille blanche (plus de cartes ni d'ombres entre les colonnes), filets fins, la couleur seule change au survol.
   > 1 100 px : rien d'ouvert = la liste prend toute la largeur, une ligne par mail ; un mail ouvert = volet en rail (76 px),
   liste étroite (nom + objet), lecture large qui arrive en glissant. ≤ 1 100 px : la lecture reste en fenêtre (inchangé). */
html body.mo-on{--mol-pad:28px;--mol-row-pad:16px;--mol-tint:color-mix(in srgb,var(--accent) 8%,var(--surface));--mol-hover:color-mix(in srgb,var(--ink) 3.5%,var(--surface));--mol-hair:color-mix(in srgb,var(--line) 75%,transparent)}
/* une seule feuille : plus de cartes ni d'ombres entre les colonnes */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo{background:var(--surface)!important;border:0!important;border-radius:0!important;box-shadow:none!important;gap:0!important;padding:0!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo>.mliste2,html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo>.mlect2{border-radius:0!important;box-shadow:none!important;border:0!important;background:var(--surface)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo>.mliste2{border-right:1px solid var(--mol-hair)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo>.movolet{border-radius:0!important;box-shadow:none!important;border:0!important;border-right:1px solid var(--mol-hair)!important;background:color-mix(in srgb,var(--ink) 1.8%,var(--surface))!important}
/* en-tête de la liste : titre net, outils discrets */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mltete{padding:22px var(--mol-pad) 6px!important;border:0!important;background:transparent!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mltete .mrech{background:color-mix(in srgb,var(--ink) 4%,var(--surface))!important;border:0!important;border-radius:12px!important;height:40px}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .motete{margin-top:14px}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .motete .mo-tnom{font-size:22px!important;letter-spacing:-.015em;font-weight:650}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt{padding:4px calc(var(--mol-pad) - 10px) 10px!important;border:0!important;gap:2px!important;background:transparent!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt>button{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;border-radius:8px!important;transition:background-color .15s,color .15s}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt>button:hover{background:var(--mol-hover)!important;color:var(--ink)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mbsyncz{padding:0 var(--mol-pad) 8px!important;font-size:12px;color:var(--muted)}
/* jours : simples intertitres */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mjour{padding:26px var(--mol-pad) 8px!important;background:var(--surface)!important;box-shadow:none!important;border:0!important;font-size:11.5px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important;font-weight:600}
/* lignes : plus de cartes ; un filet ; la couleur seule change au survol (rien ne bouge) */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows{padding:0 0 64px!important;background:var(--surface)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2{margin:0!important;border:0!important;border-radius:0!important;box-shadow:inset 0 -1px 0 var(--mol-hair)!important;background:var(--surface)!important;transform:none!important;transition:background-color .15s ease!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2::after{content:none!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2:hover{background:var(--mol-hover)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2.on{background:var(--mol-tint)!important;box-shadow:inset 3px 0 0 var(--accent),inset 0 -1px 0 var(--mol-hair)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2 .de{font-size:14.5px!important;font-weight:500!important;color:var(--ink2)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2 .obj{font-size:14px!important;font-weight:400!important;color:var(--ink2)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2.nl .de,html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2.nl .obj{font-weight:650!important;color:var(--ink)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2 .ap{color:var(--muted)!important;font-size:13px!important;line-height:1.5!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2 time{font-size:12px!important;color:var(--muted)!important;font-weight:500!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2.nl time{color:var(--accent-strong)!important;font-weight:650!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2 .pt{background:var(--accent)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mplus{padding:20px var(--mol-pad)!important;border:0!important}
/* lecture : plus de bandeau gris, la personne en tête, une barre d'outils lisible */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read{padding:0!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.mbband{margin:0!important;padding:28px 40px 18px!important;background:linear-gradient(100deg,color-mix(in srgb,var(--hdc,var(--v3p)) 10%,var(--surface)),color-mix(in srgb,var(--hdc,var(--v3p)) 2%,var(--surface)))!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.mbband .mbb{background:transparent!important;border:1px solid var(--line)!important;box-shadow:none!important;transition:background-color .15s}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.mbband .mbb:hover{background:var(--mol-hover)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils{position:sticky;top:0;z-index:3;margin:0!important;padding:9px 40px!important;gap:2px!important;background:color-mix(in srgb,var(--surface) 94%,transparent)!important;backdrop-filter:blur(8px);border:0!important;border-top:1px solid var(--mol-hair)!important;border-bottom:1px solid var(--mol-hair)!important;border-radius:0!important;box-shadow:none!important;flex-wrap:nowrap!important;overflow:hidden}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils>button{border:0!important;box-shadow:none!important;background:transparent!important;color:var(--ink2)!important;border-radius:9px!important;height:36px!important;min-width:36px;transform:none!important;transition:background-color .15s,color .15s!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils>button:hover{background:var(--mol-hover)!important;color:var(--ink)!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils>button.pri{background:var(--v3p)!important;color:#fff!important;padding:0 13px!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils>button.pri:hover{background:var(--v3p2)!important;color:#fff!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils>.sep{opacity:.5;margin:0 6px!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.mdoc{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;padding:0!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.mdoc>.in{padding:34px 40px 96px!important;max-width:880px}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mdoc h2{font-size:24px!important;line-height:1.3!important;letter-spacing:-.015em;font-weight:650}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mcorps:not(.mhtml),html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mtexte{font-size:15.5px!important;line-height:1.75!important;max-width:70ch}
/* sous le message : une seule zone « Répondre », calme */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mdoc .mpretes{margin-top:40px!important;padding-top:24px!important;border-top:1px solid var(--mol-hair)!important;gap:8px!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mdoc .mpretes>button{background:transparent!important;border:1px solid var(--line)!important;box-shadow:none!important;border-radius:999px!important;color:var(--ink2)!important;transition:background-color .15s,border-color .15s!important;transform:none!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mdoc .mpretes>button:hover{background:var(--mol-tint)!important;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mdoc .mrapide{margin-top:14px!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mdoc .mbac{margin-top:18px!important;opacity:.85}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mdoc .sflisuites{margin-top:36px!important;border:0!important;background:transparent!important;padding:0!important}
/* écran vide (aucun message ouvert) : centré, aéré */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mlect2 .mvide,html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mlect2 .m3vide{background:transparent!important}
/* animations douces, coupées pour qui les refuse */
@keyframes molEntre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html body.mo-on .mail4 *,html body.mo-on .mail4{animation:none!important;transition:none!important}}
/* sombre : les mêmes règles, les variables suivent le thème */
:root[data-theme="dark"] body.mo-on{--mol-hover:color-mix(in srgb,#fff 5%,var(--surface));--mol-tint:color-mix(in srgb,var(--accent) 18%,var(--surface))}
/* volet : compteurs en simple texte, lignes calmes */
html body.mo-on.mo-on .movolet .mo-f .mo-u{background:transparent!important;color:var(--muted)!important;box-shadow:none!important;font-weight:600}
html body.mo-on.mo-on .movolet .mo-f.on .mo-u{color:var(--accent-strong)!important}
html body.mo-on.mo-on .movolet .mo-f.nl:not(.on) .mo-u{color:var(--ink)!important}
html body.mo-on.mo-on .movolet .mo-f{border-radius:10px!important;transition:background-color .15s,color .15s!important}
html body.mo-on.mo-on .movolet .mo-f.on{background:var(--mol-tint)!important;color:var(--accent-strong)!important;box-shadow:none!important}
html body.mo-on.mo-on .movolet .mo-f.on .mo-nm,html body.mo-on.mo-on .movolet .mo-f.on .mo-fi{color:var(--accent-strong)!important}
html body.mo-on.mo-on .movolet .mo-sec{font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important;margin-top:22px!important}
html body.mo-on.mo-on .movolet :is(.mo-nm,.mo-sec .mo-nm){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0}
html body.mo-on.mo-on .movolet .mo-sec{white-space:nowrap;overflow:hidden}
/* outils de la liste sur UNE ligne : icônes seules (le nom reste en info-bulle) */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt{flex-wrap:nowrap!important;align-items:center}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt :is(.mnotifmode,.maller)>span{display:none!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt :is(.mnotifmode,.maller){width:32px;padding:0!important;justify-content:center}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.mbband{align-items:center!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.mbband .mbacts{flex-wrap:nowrap!important;flex:none}
html body.mo-on.mo-on .movolet .mo-corps{padding-left:12px!important;padding-right:12px!important}

@media(min-width:1101px){ html body.mo-on{--mo-w:280px!important} }
/* rien d'ouvert : la lecture vide disparaît, la liste prend toute la largeur, une ligne par mail */
@media(min-width:1101px){
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)){grid-template-columns:var(--mo-w) minmax(0,1fr) 0!important}
  /* 27/10 · vue « Sans volet » : sans message ouvert, la liste prend toute la largeur (la ligne du dessus gardait 280 px pour le volet caché) */
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mocache:not(:has(.m3read .mdoc)){grid-template-columns:minmax(0,1fr) 0!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc))>.mlect2{visibility:hidden}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc))>.mliste2{border-right:0!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2{grid-template-columns:34px minmax(150px,220px) minmax(0,1fr) auto!important;grid-template-rows:auto!important;align-items:center;column-gap:18px!important;padding:13px 40px 13px 34px!important;contain-intrinsic-size:auto 60px}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2>.mbav{width:34px!important;height:34px!important;font-size:12px!important;grid-column:1!important;grid-row:1!important;margin:0!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2>.mck{left:34px!important;top:13px!important;width:34px!important;height:34px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2>.de{grid-column:2!important;grid-row:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2>.obj{grid-column:3!important;grid-row:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2>.ap{display:none!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2>time{grid-column:4!important;grid-row:1!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2>.pj{display:none!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mrow2 .pt{left:16px!important;top:50%!important;margin-top:-3px}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) :is(.mltete,.mfilt,.mbsyncz){padding-left:34px!important;padding-right:40px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mltete .mrech{max-width:640px}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows .mjour{padding-left:34px!important}
  /* un mail ouvert : rail 76 px (celui d'aujourd'hui) + liste étroite + lecture large */
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc){grid-template-columns:76px var(--mo-lu,clamp(300px,22vw,460px)) minmax(0,1fr)!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mrows .mrow2{grid-template-columns:30px minmax(0,1fr) auto!important;column-gap:12px!important;padding:13px 20px 13px 22px!important;contain-intrinsic-size:auto 64px}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mrows .mrow2>.mbav{width:30px!important;height:30px!important;font-size:11px!important;grid-row:1/span 2!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mrows .mrow2>.mck{left:22px!important;top:13px!important;width:30px!important;height:30px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mrows .mrow2>.obj{grid-column:2/4!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mrows .mrow2>.ap{display:none!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mrows .mrow2 .pt{left:8px!important;top:26px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) :is(.mltete,.mfilt,.mbsyncz){padding-left:20px!important;padding-right:20px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mfilt :is(.mnotifmode span,.maller span){display:none}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mrows .mjour{padding-left:22px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .m3read>.mdoc>.in{max-width:980px}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .m3read>.mbband{padding-left:56px!important;padding-right:56px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .m3read>.moutils{padding-left:40px!important;padding-right:40px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .m3read>.mdoc>.in{padding-left:56px!important;padding-right:56px!important}
  /* la lecture arrive en glissant depuis la droite */
  @keyframes molGlisse{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){html body.mo-on .mail4>.mlect2{animation:none!important}}

@media(min-width:1101px){
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .motete .mo-tnom{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc))>.mlect2{display:none!important}
}
@media(min-width:1101px){ html body.mo-on .mail4:not(:has(.m3read .mdoc)) .mo-poignee{display:none!important} }

/* lignes (toutes largeurs ; > 1 100 px les règles « lecture large » ci-dessus priment) : la case de sélection se pose pile SUR la photo */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2{padding:15px var(--mol-pad) 15px 24px!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2>.mck{left:24px!important;top:16px!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2 .pt{left:9px!important}
@media(max-width:600px){ html body.mo-on{--mol-pad:16px} html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2{padding-left:18px!important} html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2>.mck{left:18px!important} html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mrow2 .pt{left:5px!important} }
/* la barre de la sélection groupée : sur une ligne quand la liste est large ; dans la colonne étroite, deux lignes nettes
   (« N sélectionnés … Annuler », puis les gestes en icônes — le nom reste lu par les lecteurs d'écran), jamais un geste coupé */
html body.mo-on .mail4.mb.mo>.mliste2{container:mliste/inline-size}
html body.mo-on .mail4.mb.mo .mbulk{flex-wrap:nowrap;padding:8px var(--mol-pad) 6px;gap:2px}
@container mliste (max-width:700px){
  html body.mo-on .mail4.mb.mo .mbulk{flex-wrap:wrap;row-gap:6px}
  html body.mo-on .mail4.mb.mo .mbulk>b{order:0;flex:1 1 auto;white-space:nowrap;font-size:13px}
  html body.mo-on .mail4.mb.mo .mbulk>.x{order:1;margin-left:auto;font-size:12.5px;padding:0 6px}
  html body.mo-on .mail4.mb.mo .mbulk>button:not(.x),html body.mo-on .mail4.mb.mo .mbulk>label.mdepl2{order:2;font-size:0;gap:0;padding:0 8px;flex:none}
  html body.mo-on .mail4.mb.mo .mbulk>b+*{margin-left:0}
  html body.mo-on .mail4.mb.mo .mbulk::after{content:"";order:1;flex-basis:100%;height:0}
  html body.mo-on .mail4.mb.mo .mbulk>label.mdepl2 select{font-size:12.5px;max-width:110px;margin-left:4px}
}
/* « Nouveau message » en entier même dans un volet de 258 px (≤ 1 100 px) */
html body.mo-on.mo-on .movolet .mo-nouv{padding:0 8px;gap:6px}
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.mo-on{--mol-hover:color-mix(in srgb,#fff 5%,var(--surface));--mol-tint:color-mix(in srgb,var(--accent) 18%,var(--surface))} }

/* ═══ 21/10/2026 · TOUTE LA PLACE, SUR TOUS LES ÉCRANS (le user : « que ça s'adapte vraiment à tous les écrans et que ça utilise toute
   la place ») — la lecture n'est plus bridée (980 px, texte 632 px : à 2 560 px plus de la moitié restait vide) ; la liste étroite
   grandit avec l'écran ; ≤ 1 100 px le mail ouvert prend TOUT l'écran au lieu d'une petite fenêtre centrée (283 px de texte à 390 px) ═══ */
@media(min-width:1101px){
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc){grid-template-columns:76px var(--mo-lu,clamp(300px,22vw,460px)) minmax(0,1fr)!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .m3read>.mdoc>.in{max-width:none!important}
}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mdoc .in,html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mdoc .in:has(iframe.mhtml){max-width:none!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mcorps:not(.mhtml),html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mtexte{max-width:none!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mcorps.mhtml,html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read iframe.mhtml{width:100%!important;max-width:none!important}
/* liste seule : la recherche suit toute la largeur de la colonne */
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mltete .mrech{max-width:none!important}
/* très grands écrans : un peu plus d'air et de texte, toujours sans colonne centrée */
@media(min-width:2000px){
  html body.mo-on{--mol-pad:40px}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mcorps:not(.mhtml),html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mtexte{font-size:17px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read .mdoc h2{font-size:28px!important}
}
/* ≤ 1 100 px : le mail ouvert (fenêtre de lecture du hub) occupe tout l'écran, bord à bord */
@media(max-width:1100px){
  body.mo-on #modalScrim.on:has(>#modalBox>.mailread){padding:0!important;align-items:stretch!important;justify-content:stretch!important}
  body.mo-on #modalScrim.on>#modalBox:has(>.mailread){width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;margin:0!important;box-shadow:none!important}
  body.mo-on #modalBox>.mailread .mcorps,body.mo-on #modalBox>.mailread .mtexte,body.mo-on #modalBox>.mailread .mcorps.mhtml,body.mo-on #modalBox>.mailread iframe.mhtml{max-width:none!important;width:100%}
}
@media(max-width:600px){
  body.mo-on #modalBox>.mailread .mletter,body.mo-on #modalBox>.mailread .mband{padding-left:14px!important;padding-right:14px!important;margin-left:0!important;margin-right:0!important}
}
/* la fenêtre de RÉPONSE aussi : > 1 100 px elle prend presque tout l'écran (24 px de marge ; avant 1 480 × 980 au plus, 58 % d'un 2 560) ;
   ≤ 1 100 px plein écran, et le mail reçu revient SOUS la réponse (il était masqué sous 1 000 px — le user : « jamais cacher le mail d'origine ») */
@media(min-width:1101px){
  body.mo-on .modal:has(.rdduo){width:calc(100vw - 48px)!important;max-width:2400px!important;height:calc(100dvh - 48px)!important;max-height:none!important}
}
@media(max-width:1100px){
  body.mo-on #modalScrim.on:has(>#modalBox :is(.rdduo,.rd2m)){padding:0!important;align-items:stretch!important;justify-content:stretch!important}
  body.mo-on #modalScrim.on>#modalBox:has(:is(.rdduo,.rd2m)){width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;margin:0!important;box-shadow:none!important;overflow:hidden auto!important}
}
@media(max-width:1000px){
  body.mo-on .modal:has(.rdduo) .rddroite{display:block!important;position:static!important;height:auto!important;max-height:none!important;overflow:visible!important;border-top:1px solid var(--line)}
  body.mo-on .modal:has(.rdduo) .rdduo{height:auto!important}
}
body.mo-on .modal:has(.rdduo) .rddroite .mdoc .in,body.mo-on .modal:has(.rdduo) .rddroite .mcorps{max-width:none!important}

/* ═══ 21/10/2026 · 2e TOUR DE VÉRIFICATION (« regarde tous les bugs pour être sûr que ça marche ») ═══ */
/* l'arrivée d'un autre mail (classes posées une fois par mo.js : arrivee()) — plus de clignotement à chaque rendu */
@keyframes molArrive{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes molFondu{from{opacity:.4}to{opacity:1}}
html body.mo-on .mail4.mb.mo>.mlect2.mol-glisse{animation:molArrive .24s cubic-bezier(.2,.7,.2,1) both}
html body.mo-on .mail4.mb.mo>.mlect2.mol-fondu{animation:molFondu .14s ease-out both}
/* > 1 100 px : le bouton « Retour à la liste » (Échap) est visible dans la barre de lecture — on revient à la liste pleine */
@media(min-width:1101px){ html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils>.mretour{display:grid!important}
  /* … à la place d'« Agrandir la lecture », qui fait doublon avec la lecture large (Échap en sort toujours) */
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .m3read>.moutils>.mlarge-b{display:none!important} }
/* liste pleine : la barre de recherche (« Réception · Tous les dossiers »), l'en-tête d'une personne et les paquets de notifications
   s'alignent sur les lignes */
@media(min-width:1101px){
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mliste2 :is(.mrechb,.mperso){padding-left:34px!important;padding-right:40px!important;box-sizing:border-box}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mrows>.mnotif{padding-left:34px!important;padding-right:40px!important}
}
/* le RAIL : survolé, il s'ouvre sans faire descendre les icônes (avant +50 px : un clic sur « Envoyés » tombait sur la Réception) ;
   le compteur ne mord plus sur l'icône */
@media(min-width:1101px){
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps>.mo-sec:first-child{display:flex!important;visibility:hidden}
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-f{min-height:38px!important;margin-bottom:0!important}
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-hd{padding:24px 12px 12px 10px!important}
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-dr{top:-6px!important;right:-8px!important}
}
/* « Fil de la conversation » : la classe .mfil du hub (pastille ronde, 01-base.css) en faisait un ovale */
html body .mailread .mfil,html body .m3read .mfil{display:block;margin-left:0;padding:14px 0 0;border-radius:0;background:none;color:inherit;font-size:inherit;font-weight:inherit}
/* ≤ 1 100 px, plein écran : les zones sûres (encoche, barre d'état, barre d'accueil) ; la croix reste en haut ; le pied de la réponse
   (Joindre · Copier · Aperçu · Envoyer) reste au bas de l'écran, même clavier ouvert ; les messages passent en haut de l'écran */
@media(max-width:1100px){
  body.mo-on #modalScrim.on>#modalBox:has(>.mailread),body.mo-on #modalScrim.on>#modalBox:has(:is(.rdduo,.rd2m)){box-sizing:border-box;
    padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important}
  body.mo-on #modalBox:has(>.mailread,.rdduo,.rd2m) .mh{position:sticky;top:0;z-index:6;background:var(--surface)}
  body.mo-on #modalBox .rd2m .rdpied{position:sticky;bottom:0;z-index:5;background:var(--surface);margin-bottom:0;padding-bottom:12px}
  body:has(#modalScrim.on .mailread) .nf-pile,body:has(#modalScrim.on .rdduo) .nf-pile,body:has(#modalScrim.on .rd2m) .nf-pile{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto}
  body.mo-on #modalBox>.mailread iframe.mhtml,body.mo-on #modalBox>.mailread .mhtml{min-height:120px!important}
}
/* le bandeau « Départ dans 5 s » (Annuler / Envoyer maintenant) passe AU-DESSUS des messages : « Brouillon repris. » le couvrait,
   Annuler ne répondait plus et le mail partait */
body .envdiff{z-index:1450}
/* téléphone couché (≤ 500 px de haut) : en-tête de liste resserré, les mails restent visibles */
@media(max-height:500px) and (max-width:1100px){
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mltete{padding:8px var(--mol-pad) 2px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .motete{margin-top:4px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .motete .mo-tnom{font-size:17px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mbsyncz{display:none!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mrows .mjour{padding:10px var(--mol-pad) 4px!important}
}
/* tactile : la croix d'une pastille de destinataire se touche (9 × 12 px avant) */
@media(hover:none),(max-width:760px){ .rdw .rdachip>button,.rdw .evtchip>button{min-width:30px;min-height:30px;display:inline-grid;place-items:center} }
/* la première coche ne pousse plus les lignes sous la souris (+42 px) : dans la colonne étroite, la barre de sélection (2 lignes) prend
   exactement la place des filtres + « N messages · À jour » (masqué le temps de la sélection) */
@container mliste (max-width:700px){
  html body.mo-on .mail4.mb.mo .mliste2:has(.mbulk) .mbsyncz{display:none!important}
  html body.mo-on .mail4.mb.mo .mbulk{box-sizing:border-box;height:66px;padding-top:4px!important;padding-bottom:4px!important;row-gap:2px!important;align-content:center}
  html body.mo-on .mail4.mb.mo .mbulk>:is(button,label,b){height:28px}
}
/* appui long = cocher (62-mail-quotidien.js) : sur iOS, pas de bulle de sélection de texte par-dessus */
@media(hover:none){ .mail4 .mrows .mrow2{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} }
/* barre de lecture étroite (≈ 1 100-1 180 px) : avec « Retour » visible, la position « 2 / 30 » cède sa place (J/K et ‹ › restent) */
@container barrelect (max-width:780px){ html body.mo-on .mail4.mb.mo .moutils>.pos{display:none!important} }

/* ═══ 21/10/2026 · RÉPONDRE / ENVOYER (le user : « que ce ne soit pas trop haut pour écrire ») — avec un mail chargé de pièces, la
   zone d'écriture tombait à 206 px et « Envoyer » sortait de la fenêtre à 1 280 × 800 : le pied reste collé en bas à TOUTES les
   tailles, les pièces du message d'origine tiennent sur UNE ligne qui défile de côté, l'écriture prend le reste ═══ */
body.mo-on #modalBox .rdw.rd2m .rdpied{position:sticky;bottom:0;z-index:5;background:var(--surface);margin-bottom:0;padding-bottom:12px}
body.mo-on #modalBox .rdw .rdpj{margin-top:10px}
body.mo-on #modalBox .rdw .rdpj .rdsigtete{padding:6px 12px}
body.mo-on #modalBox .rdw .rdpj .rdpjl{display:flex!important;flex-wrap:nowrap!important;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 10px 8px;scrollbar-width:thin}
body.mo-on #modalBox .rdw .rdpj .rdpjl>*{flex:none!important;margin:0!important}
body.mo-on #modalBox .rdw.rd2m>.rdzone{flex:1 1 auto;min-height:240px}
/* téléphone (≤ 600 px) : l'écriture commence plus haut — « En réponse à … » (déjà dans l'objet) masqué, + Cc / + Cci sur la ligne du
   « À », barre de mise en forme sur une ligne qui défile, en-tête et pied resserrés (Joindre · Copier · Aperçu en icônes, Envoyer entier) */
@media(max-width:600px){
  body.mo-on #modalBox:has(.rd2m) .mh{padding:8px 12px 8px 16px!important}
  body.mo-on #modalBox .rdw.rd2m>.rdrap{display:none!important}
  body.mo-on #modalBox .rdw.rd2m>.rdchampa{flex-wrap:nowrap!important;align-items:center}
  body.mo-on #modalBox .rdw.rd2m>.rdchampa>.rdadest{flex:1 1 auto!important;min-width:0!important;width:auto!important}
  body.mo-on #modalBox .rdw.rd2m>.rdchampa>.rdccb{flex:none;padding:0 6px!important;font-size:12.5px}
  body.mo-on #modalBox .rdw.rd2m .rdoutils{padding-top:6px!important;padding-bottom:6px!important;row-gap:6px!important}
  body.mo-on #modalBox .rdw.rd2m .mbbarrefmt{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  body.mo-on #modalBox .rdw.rd2m .mbbarrefmt>*{flex:none!important}
  body.mo-on #modalBox .rdw.rd2m>.rdzone{min-height:200px}
  body.mo-on #modalBox .rdw.rd2m .rdpied{flex-wrap:nowrap!important;gap:4px!important;padding-top:10px!important}
  body.mo-on #modalBox .rdw.rd2m .rdpied label.rdjbtn,body.mo-on #modalBox .rdw.rd2m .rdpiedd>:not(.cta){font-size:0!important;gap:0!important;padding:0 10px!important;min-width:40px;justify-content:center}
  body.mo-on #modalBox .rdw.rd2m .rdpied label.rdjbtn svg,body.mo-on #modalBox .rdw.rd2m .rdpiedd>:not(.cta) svg{width:18px;height:18px}
  body.mo-on #modalBox .rdw.rd2m .rdpiedd{flex:1 1 auto!important;margin-left:auto}
}

/* ═══ 22/10/2026 · BARRE DE LA LISTE : « Affichage » (mo.js barreVue) et LIGNES COMPACTES quand un mail est ouvert ═══
   Capture du user : en lignes compactes, mail ouvert, le nom et l'objet se superposaient (la grille d'une ligne du mode compact
   croisait celle de la colonne étroite) → dans la colonne étroite, le compact devient deux lignes serrées, sans chevauchement. */
html body.mo-on .mail4.mb.mo .mfilt.mo-vueon>:is(.mnotifmode,.maller,[data-mbdense]){display:none!important}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt>.mo-vue{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;white-space:nowrap;border:0;border-radius:9px;background:transparent;color:var(--ink2);font:inherit;font-size:13px;font-weight:550;cursor:pointer;flex:none;transition:background-color .15s,color .15s}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt>.mo-vue:hover{background:var(--mol-hover,color-mix(in srgb,var(--ink) 4%,var(--surface)));color:var(--ink)}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt>.mo-vue.on{color:var(--accent-strong)}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mfilt>.mo-vue svg.moi{width:16px;height:16px}
@container mliste (max-width:420px){ html body.mo-on .mail4.mb.mo .mfilt>.mo-vue>span{display:none} html body.mo-on .mail4.mb.mo .mfilt>.mo-vue{padding:0 8px} }
.mopop.mo-vuepop{min-width:300px}
.mopop.mo-vuepop .mo-vit{align-items:flex-start;gap:12px;padding:10px 12px;min-height:0}
.mopop.mo-vuepop .mo-vit .mo-nm{display:flex;flex-direction:column;gap:2px;white-space:normal;font-weight:550}
.mopop.mo-vuepop .mo-vit .mo-nm small{font-size:12px;font-weight:400;line-height:1.35;color:var(--muted)}
.mopop.mo-vuepop .mo-vit svg.moi{margin-top:1px;flex:none}
.mopop.mo-vuepop .mo-vit svg.mo-coche{margin-left:auto;color:var(--accent-strong)}
.mopop.mo-vuepop .mo-vit[disabled]{opacity:.5;cursor:default}
/* lignes compactes, mail ouvert (colonne étroite) : nom · heure / objet, photo 26 px — plus jamais l'un sur l'autre */
@media(min-width:1101px){
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2{grid-template-columns:26px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:11px!important;row-gap:1px!important;padding:8px 18px 8px 20px!important;align-items:center;contain-intrinsic-size:auto 52px}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2>.mbav{width:26px!important;height:26px!important;font-size:10px!important;grid-column:1!important;grid-row:1/span 2!important;margin:0!important;align-self:center!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2>.mck{left:20px!important;top:50%!important;margin-top:-13px!important;width:26px!important;height:26px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2>.de{grid-column:2!important;grid-row:1!important;font-size:13.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2>time{grid-column:3!important;grid-row:1!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2>.obj{grid-column:2/4!important;grid-row:2!important;font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2>:is(.ap,.pj){display:none!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo.mbcompact:has(.m3read .mdoc) .mrows .mrow2 .pt{left:7px!important;top:50%!important;margin-top:-3px}
}

/* ═══ 23/10 · RÉPONDRE, À TOUS, TRANSFÉRER EN HAUT DE LA FENÊTRE ════════════════════════════════════════════════════════════
   (le user : « qu'importe l'interface, pouvoir répondre, transférer et répondre à tous facilement, sans descendre plus bas »)
   En fenêtre (≤ 1 100 px, téléphone, mail ouvert depuis une autre page), les trois gestes sont dans l'en-tête (.mhrep, 28-mail.js),
   qui reste COLLÉ en haut à toutes les tailles. Boutons immobiles ; sur un téléphone, icônes seules (libellés lus par aria-label). */
body.mo-on #modalBox:has(>.mailread) .mh{position:sticky;top:0;z-index:6;background:var(--surface)}
html body #modalBox .mh .mhrep{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 14px;flex:0 1 auto;min-width:0}
html body #modalBox .mh .mhrep .mhb{display:inline-flex;align-items:center;gap:6px;height:34px;min-height:34px;padding:0 12px;font-size:13px;border-radius:10px;white-space:nowrap;transform:none!important}
html body #modalBox .mh .mhrep .mhb svg{width:16px;height:16px;flex:none}
html body #modalBox .mh.mhmin{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
html body #modalBox .mh .mhlab{flex:none;white-space:nowrap}
@media(max-width:640px){
  html body #modalBox .mh .mhlab{font-size:0;gap:0}                 /* « Message reçu » : l'icône seule, la place va aux gestes */
  html body #modalBox .mh .mhlab svg{width:18px;height:18px}
  html body #modalBox .mh .mhrep{margin-left:6px;gap:4px}
  html body #modalBox .mh .mhrep .mhb{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:12px}
  html body #modalBox .mh .mhrep .mhb span{display:none}
}

/* 26/10 · dossier-parent sans messages (archive importée, \Noselect) : il se déplie, ne s'ouvre pas — en gris, comme dans kSuite */
.movolet .mo-f.mo-cont .mo-nm,.momod .mo-f.mo-cont .mo-nm{color:var(--ink-3,#6b7280)}
.movolet .mo-f.mo-cont .mo-fi,.momod .mo-f.mo-cont .mo-fi{opacity:.65}

/* ═══ 27/10 · LE RAIL (mail ouvert, > 1 100 px) : le dossier ouvert y reste, les compteurs ne mordent plus sur les icônes ═══════════
   Avant : seuls les Favoris restaient — dans « Abacus » ou un sous-dossier, aucune icône n'était surlignée ; Favoris repliés, le rail
   montrait TOUS les dossiers en icônes identiques ; « 1 295 » (9,5 px) débordait de la pastille sur l'icône.
   Maintenant : les Favoris, puis le dossier ouvert s'il n'en fait pas partie (surligné) ; Favoris repliés : les dossiers par défaut et
   le dossier ouvert ; le compteur passe en pastille au coin, au-dessus de l'icône, en version courte (« 1,2k », data-court de mo.js). */
@media(min-width:1101px){
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps:has(>.mo-gfav)>.mo-gcpt .mo-f:not(.on),
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps:has(>.mo-gfav .mo-f.on)>.mo-gcpt .mo-f.on,
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps:not(:has(>.mo-gfav))>.mo-gcpt .mo-f:not(.on):not(.mo-def),
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps :is(.mo-edit,.mo-err){display:none!important}
  /* le dossier ouvert, sous les Favoris : un filet le sépare */
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps:has(>.mo-gfav)>.mo-gcpt .mo-f.on{margin-top:14px!important}
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-corps:has(>.mo-gfav)>.mo-gcpt .mo-f.on::before{content:"";position:absolute;left:10px;right:10px;top:-8px;height:1px;background:var(--mol-hair,var(--line))}
  /* la pastille : au coin haut-droit, AU-DESSUS de l'icône (la ligne fait 38 px, l'icône 19 px au centre : 9 px libres en haut) */
  html body.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-f .mo-dr{position:absolute!important;top:-7px!important;right:-10px!important;left:auto!important;min-width:0!important;display:block!important;z-index:1;pointer-events:none}
  html body.mo-on.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-f .mo-u[data-court]{display:block;min-width:16px;max-width:30px;box-sizing:border-box;padding:0 4px!important;border-radius:99px;font-size:0!important;line-height:15px!important;text-align:center;background:var(--v3p)!important;color:#fff!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 1.8%,var(--surface))!important;overflow:hidden;white-space:nowrap}
  html body.mo-on.mo-on .mail4.mb.mo.mo:not(.mocache):not(.moepingle):has(.m3read .mdoc)>.movolet.movolet:not(:hover):not(:focus-within):not(.mo-glisse) .mo-f .mo-u[data-court]::after{content:attr(data-court);font-size:9px;font-weight:700;letter-spacing:-.01em}
}

/* 27/10 · tiroir (≤ 760 px, ou téléphone couché) avec une souris : « ⋯ », l'étoile et « × » d'une boîte se posaient SUR le compteur
   (« 3 » de Brouillons, « 129 » d'une boîte) — la règle (hover:none) ne couvrait que l'écran tactile. Ici aussi ils se rangent À CÔTÉ. */
@media(max-width:760px),(max-height:500px) and (max-width:1100px){
  html body .movolet .mo-f .mo-dr{display:flex;align-items:center;gap:2px}
  html body .movolet .mo-f .mo-dr>.mo-act,html body.mo-on .movolet .mo-f.on .mo-dr>.mo-act{position:static;transform:none;padding-left:0;visibility:visible;background:none!important}
  html body .movolet .mo-f .mo-dr>span{visibility:visible!important}
}

/* ═══ 28/10 · « GÉRER LES DOSSIERS » (mo.js, section 13) : une grande fenêtre aérée — un vrai arbre, l'ordre choisi, plusieurs dossiers
   d'un coup, le nettoyage à droite. Survols immobiles : la couleur seule change. Téléphone : plein écran, le nettoyage à la demande. ═══ */
.momod.mo-gerer{width:min(1120px,calc(100vw - 80px));height:min(860px,calc(100vh - 64px));max-height:none;border-radius:20px;overflow:hidden}
.mo-gerer .mo-gh{padding:28px 26px 4px 34px}
.mo-gerer .mo-gh h3{font-size:24px}
.mo-gerer .mo-gh small{font-size:13.5px}
.mo-gbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:16px 34px 2px}
.mo-gbar .mo-gq{flex:1 1 260px;max-width:440px;min-height:44px;margin:0;border-radius:12px}
.mo-gbar .mo-gq input{height:42px;font-size:14px}
.mo-gbar .mo-gq kbd,.mo-gkbd kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;background:var(--surface);font:600 11px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--muted)}
.mo-gtri{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.mo-gtri select{height:44px;min-width:0;padding:0 12px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;cursor:pointer}
.mo-gtri select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mo-gbar .mo-btn{height:44px;border-radius:12px}
.mo-gbar .mo-gpl{padding:0 13px;color:var(--muted)}
.mo-gbar .mo-gnetb{display:none}
.mo-gbar .mo-gnetb b{min-width:22px;line-height:20px;padding:0 6px;border-radius:99px;font-size:11.5px}
.mo-gaide{flex:none;margin:0;min-height:19px;padding:8px 34px 14px;font-size:13px;line-height:1.45;color:var(--muted);overflow-wrap:break-word}
.mo-gcorps{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;border-top:1px solid var(--line)}
.mo-gcol{min-width:0;min-height:0;display:flex;flex-direction:column}
.mo-garbre{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 22px 48px 26px;scroll-padding:56px 0}
.mo-gaside{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px 26px 36px;border-left:1px solid var(--line);background:color-mix(in srgb,var(--ink) 1.6%,var(--surface))}
.mo-gerer .mo-gpied{gap:12px;padding:14px 26px 18px 34px}
.mo-gkbd{flex:1 1 420px;min-width:0;margin:0;font-size:12px;line-height:2;color:var(--muted);overflow-wrap:break-word}
.mo-gkbd kbd{margin:0 1px}
/* la racine : une zone de dépôt claire, en tête de l'arbre */
.mo-gracine{display:flex;align-items:center;gap:12px;margin:2px 0 6px;padding:11px 16px;border:1.5px dashed var(--line2);border-radius:14px;color:var(--muted);font-size:13px;line-height:1.4;transition:background-color .15s,border-color .15s,color .15s}
.mo-gracine svg.moi{width:18px;height:18px;flex:none}
.mo-gracine span{min-width:0;overflow-wrap:break-word}
.mo-gracine b{display:block;font-size:13.5px;font-weight:600;color:var(--ink2)}
.mo-gracine small{display:block;font-size:12px}
.mo-gerer.mo-gglisse .mo-gracine,.mo-gerer.mo-gpick .mo-gracine.cible{border-color:var(--accent);color:var(--ink2);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.mo-gerer.mo-gpick .mo-gracine.cible{cursor:pointer}
.mo-gerer.mo-gpick .mo-gracine.cible:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mo-gracine.off{opacity:.5}
.mo-gracine:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mo-gracine.mo-drop{background:var(--v3p);border-color:var(--v3p);color:#fff}
.mo-gracine.mo-drop b{color:#fff}
.mo-gsec{padding:22px 10px 8px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mo-gsec small{margin-left:6px;font-weight:500;letter-spacing:0;text-transform:none}
.mo-grien{padding:14px 10px}
/* une ligne : 42 px, 22 px de retrait par niveau ; nom | messages · activité | non lus | gestes (au survol, au clavier) */
.momod .mo-f.mo-gl{min-height:42px;gap:10px;padding:4px 8px 4px calc(10px + var(--n,0)*22px);border-radius:11px;font-size:14px}
.momod .mo-f.mo-gl.on{font-weight:400;background:var(--v3teinte)}
.momod .mo-f.mo-gl.on .mo-gn{font-weight:600}
.mo-gl .mo-gck{width:18px;flex:none;display:grid;place-items:center}
.mo-gl .mo-gck input{width:16px;height:16px;margin:0;accent-color:var(--v3p);cursor:pointer;visibility:hidden}
.mo-gl:hover .mo-gck input,.mo-gl:focus .mo-gck input,.mo-gl:focus-within .mo-gck input,.mo-gl.sel .mo-gck input,.mo-gerer.mo-gcoche .mo-gl .mo-gck input{visibility:visible}
.mo-gl .mo-fi svg.moi{width:18px;height:18px}
.mo-gl .mo-nm{display:block;min-width:0}
.mo-gl .mo-gn{display:inline;max-width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;line-height:1.35;text-align:left;cursor:pointer;overflow-wrap:anywhere;transition:color .12s}
.mo-gl .mo-gn:hover{color:var(--v3pt)}
.mo-gl .mo-gn mark{padding:0 1px;border-radius:3px;background:color-mix(in srgb,#f2c94c 45%,transparent);color:inherit}
.mo-gl .mo-nm small{margin-top:1px}
.mo-gl .mo-gmeta{flex:none;display:flex;gap:12px;font-size:12.5px;line-height:1.35;color:var(--muted);white-space:nowrap}
.mo-gl .mo-gmeta .vieux{color:#a8650b}
.mo-gl .mo-gnl{flex:none;min-width:40px;display:flex;justify-content:flex-end}
.mo-gl .mo-gnl .mo-u{min-width:26px;padding:0 7px;border-radius:99px;background:color-mix(in srgb,var(--ink) 6.5%,transparent);font-size:11.5px;font-weight:650;line-height:20px;text-align:center;color:var(--v3pt)}
.mo-gl .mo-gacts{flex:none;display:flex;align-items:center;gap:2px;visibility:hidden}
.mo-gl:hover .mo-gacts,.mo-gl:focus .mo-gacts,.mo-gl:focus-within .mo-gacts,.mo-gl.menu .mo-gacts,.mo-gl.on .mo-gacts{visibility:visible}
.mo-gl .mo-gib,.mo-gl .mo-gib.mo-star{width:32px;height:32px;display:grid;place-items:center;flex:none;padding:0;margin:0;border:0;border-radius:9px;background:none;color:var(--muted);cursor:pointer;transition:background-color .12s,color .12s}
.mo-gl .mo-gib:hover{background:var(--surface);color:var(--ink)}
.mo-gl .mo-gib.mo-sans{visibility:hidden}
.mo-gl .mo-gib.mo-star.on{color:#d89a16;visibility:visible}
.mo-gl .mo-gib.mo-star.on svg{fill:currentColor}
.mo-gl .mo-gib svg.moi{width:16px;height:16px}
.momod .mo-f.mo-gl.sel{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.momod .mo-f.mo-gl.sel.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.momod .mo-f.mo-gl.mo-cont .mo-gn{color:var(--ink-3,#6b7280)}
.momod .mo-f.mo-gl.off{opacity:.42}
.mo-gerer.mo-gpick .mo-gl:not(.off){cursor:pointer}
.mo-gerer.mo-gpick .mo-gl:not(.off):hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mo-gl.mo-edit{padding-right:12px}
.mo-gl.mo-edit input{height:32px;font-size:14px}
.mo-gl .mo-gedaide{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}
.mo-gerer .mo-err{padding:2px 8px 8px calc(84px + var(--n,0)*22px);font-size:12.5px}
/* glisser : dans un dossier (plein), entre deux lignes (un filet), le dossier de départ estompé */
.momod .mo-f.mo-gl.mo-drop{background:var(--v3p);color:#fff}
.momod .mo-f.mo-gl.mo-drop :is(.mo-gn,.mo-gmeta,.mo-fi,.mo-gib){color:#fff}
.momod .mo-f.mo-gl.mo-avant{box-shadow:inset 0 3px 0 var(--accent)}
.momod .mo-f.mo-gl.mo-apres{box-shadow:inset 0 -3px 0 var(--accent)}
.momod .mo-f.mo-gl.mo-source{opacity:.45}
.momod .mo-f.mo-gl.mo-gflash{animation:mo-gflash 1.6s ease-out}
@keyframes mo-gflash{0%,35%{background:color-mix(in srgb,var(--accent) 24%,transparent)}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){ .momod .mo-f.mo-gl.mo-gflash{animation:none;background:color-mix(in srgb,var(--accent) 14%,transparent)} }
/* la bande : plusieurs dossiers cochés, ou « Où ranger ? » */
.mo-gbande{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px;margin:16px 22px 0 26px;padding:12px 14px 12px 18px;border-radius:14px;background:var(--v3lave);font-size:13.5px}
.mo-gbande.pick{background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.mo-gbande>svg.moi{width:20px;height:20px;color:var(--v3pt)}
.mo-gbt{flex:1 1 150px;min-width:0}
.mo-gbt b{display:block;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.mo-gbt small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.mo-gbande .mo-btn{height:36px;padding:0 13px}
/* le nettoyage */
.mo-gnh h4{display:flex;align-items:center;gap:8px;margin:0;font:700 16px/1.3 "Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;color:var(--ink)}
.mo-gnh h4 svg.moi{width:18px;height:18px;color:var(--v3pt)}
.mo-gnh h4 .mo-u{min-width:24px;padding:0 7px;border-radius:99px;background:var(--v3p);color:#fff;font:650 11.5px/20px "IBM Plex Sans",system-ui,sans-serif;text-align:center}
.mo-gnh p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mo-gns{margin-top:26px}
.mo-gns h5{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:12.5px;font-weight:650;color:var(--ink2)}
.mo-gns h5 small{font-weight:500;color:var(--muted)}
.mo-gns .mo-rien{padding:4px 0;font-size:12.5px}
.mo-gnl2{margin:0;padding:0;list-style:none}
.mo-gni{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--line)}
.mo-gni:last-child{border-bottom:0}
.mo-gni .mo-nm{flex:1 1 140px;min-width:0}
.mo-gni .mo-nm b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.mo-gni .mo-nm small{display:block;font-size:12px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.mo-gnb{flex:none;display:flex;gap:2px}
.mo-gl2{min-height:30px;padding:0 9px;margin:0;border:0;border-radius:8px;background:none;color:var(--v3pt);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background-color .12s,color .12s}
.mo-gl2:hover{background:var(--v3lave)}
.mo-gl2.danger{color:var(--danger,#cf3f3f)}
.mo-gl2.mo-gplus{margin-top:4px;padding:0}
.mo-gl2.mo-gplus:hover{background:none;color:var(--ink)}
.mo-gverif{margin-top:10px;height:38px}
.mo-gnote{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.mo-gprog{margin:10px 0 0;font-size:12.5px;color:var(--ink2)}
.mo-gprog span{display:block;height:4px;margin-top:8px;border-radius:4px;background:linear-gradient(90deg,var(--v3p) var(--p,0%),var(--line) var(--p,0%))}
/* le menu ⋯ et les confirmations : DANS la fenêtre */
.mo-gcouche{position:absolute;inset:0;z-index:5}
.mo-gcouche[hidden]{display:none}
.mo-gcouche.conf{display:grid;place-items:center;padding:24px;background:rgba(13,42,41,.24)}
.mo-gmenu{position:absolute;display:flex;flex-direction:column;width:290px;max-height:calc(100% - 24px);padding:8px;border:1px solid var(--line);border-radius:15px;background:var(--surface);
  box-shadow:0 2px 6px rgba(13,42,41,.08),0 30px 64px -16px rgba(13,42,41,.32);font-size:13.5px}
.mo-gmenu .mo-it kbd{flex:none;font:500 11px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--muted);white-space:nowrap}
.mo-gconf{width:min(460px,100%);padding:24px 26px 20px;border-radius:18px;background:var(--surface);box-shadow:0 2px 6px rgba(13,42,41,.08),0 30px 64px -16px rgba(13,42,41,.4)}
.mo-gconf h4{margin:0 0 10px;font:700 18px/1.3 "Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;color:var(--ink);overflow-wrap:anywhere}
.mo-gconf p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2);overflow-wrap:break-word}
.mo-gconf .mo-merr{padding:10px 0 0}
.mo-gcb{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px}
/* ≤ 1 280 px : la colonne du nettoyage se resserre */
@media(max-width:1280px){ .mo-gcorps{grid-template-columns:minmax(0,1fr) 280px} .mo-gaside{padding:22px 20px 32px} }
/* ≤ 1 100 px : les gestes « Tout replier / déplier » en icônes ; la date d'activité quitte la ligne quand la place manque */
@media(max-width:1100px){
  .momod.mo-gerer{width:calc(100vw - 40px);height:calc(100vh - 40px)}
  .mo-gbar .mo-gpl span{display:none}
  .mo-gbar .mo-gpl{width:44px;padding:0;justify-content:center}
  .mo-gerer .mo-gkbd{display:none}
}
@media(max-width:920px){
  .mo-gcorps{grid-template-columns:minmax(0,1fr)}
  .mo-gaside{display:none;border-left:0;border-bottom:1px solid var(--line)}
  .mo-gaside.ouvert{display:block;max-height:46vh}
  .mo-gcorps:has(.mo-gaside.ouvert){grid-template-rows:auto minmax(0,1fr)}
  .mo-gaside.ouvert{grid-row:1}
  .mo-gbar .mo-gnetb{display:inline-flex}
  .mo-gl .mo-gmeta .mo-gact{display:none}
}
/* téléphone : plein écran, lignes de 48 px, gestes toujours visibles, le menu en feuille */
@media(max-width:760px),(max-height:500px) and (max-width:1100px){
  .momod.mo-gerer{left:0;right:0;top:0;bottom:0;transform:none;width:100%;height:100%;max-height:none;border-radius:0}
  .mo-gerer .mo-gh{padding:18px 12px 0 18px}
  .mo-gerer .mo-gh h3{font-size:21px}
  .mo-gbar{padding:12px 16px 0;gap:8px}
  .mo-gbar .mo-gq{flex:1 1 100%;max-width:none}
  .mo-gbar .mo-gq kbd{display:none}
  .mo-gtri{flex:1 1 120px;min-width:0}
  .mo-gtri>span{display:none}
  .mo-gtri select{flex:1;min-width:0;width:100%}
  .mo-gbar .mo-gpl{display:none}
  .mo-gbar .mo-btn.p span{display:none}
  .mo-gbar .mo-btn.p{width:44px;padding:0;justify-content:center}
  .mo-gaide{padding:8px 18px 10px}
  .mo-garbre{padding:10px 10px 40px 12px}
  .momod .mo-f.mo-gl{min-height:48px;gap:8px;padding:4px 4px 4px calc(6px + var(--n,0)*16px)}
  .mo-gl .mo-gck input{visibility:visible}
  .mo-gl .mo-gmeta{display:none}
  .mo-gl .mo-gnl{min-width:0}
  .mo-gl .mo-gacts{visibility:visible}
  .mo-gl .mo-gacts .mo-gib:not(.mo-star):not([data-mogmenu]){display:none}
  .mo-gl .mo-gib.mo-star:not(.on){display:none}
  .mo-gl .mo-gib{width:40px;height:40px}
  .mo-gl .mo-gedaide{display:none}
  .mo-gerer .mo-err{padding-left:calc(60px + var(--n,0)*16px)}
  .mo-gbande{margin:12px 12px 0;padding:10px 10px 10px 14px;gap:8px}
  .mo-gbande .mo-btn:not(.p) span{display:none}
  .mo-gbande .mo-btn:not(.p){width:40px;height:40px;padding:0;justify-content:center}
  .mo-gbande .mo-btn.p{height:40px}
  .mo-gaside{padding:18px 18px 24px}
  .mo-gerer .mo-gpied{padding:10px 16px 14px}
  .mo-gcouche.menu{background:rgba(13,42,41,.24)}
  .mo-gmenu{left:0!important;right:0;bottom:0;top:auto!important;width:100%;max-height:80%;border-radius:20px 20px 0 0;padding:12px 12px 20px}
  .mo-gmenu .mo-it{min-height:46px}
}
@media(hover:none){ .mo-gl .mo-gck input,.mo-gl .mo-gacts{visibility:visible} }
.mo-gl .mo-nm small.mo-gm2{display:none}
@media(max-width:760px),(max-height:500px) and (max-width:1100px){ .mo-gl .mo-nm small.mo-gm2{display:block} }
:root[data-theme="dark"] .mo-gl .mo-gmeta .vieux{color:#f0b54a}
:root[data-theme="dark"] .mo-gl .mo-gn mark{background:color-mix(in srgb,#f2c94c 32%,transparent)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mo-gl .mo-gmeta .vieux{color:#f0b54a}
  :root:not([data-theme="light"]) .mo-gl .mo-gn mark{background:color-mix(in srgb,#f2c94c 32%,transparent)}
}

/* ═══ 28/10 · menu « Affichage » : la TAILLE DES MAILS (trois boutons « A ») et « Dossiers toujours ouverts » (page/js/29-mail-options.js) ═══ */
.mopop.mo-vuepop .mo-vsep{height:1px;margin:6px 8px;background:var(--line)}
.mopop.mo-vuepop .mo-vt{padding:6px 12px 2px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.mopop.mo-vuepop .mo-vtail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px 10px 8px}
.mopop.mo-vuepop .mo-vtb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:64px;padding:8px 6px;border:1px solid var(--line);
  border-radius:12px;background:transparent;color:var(--ink2);font:inherit;font-size:12.5px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.mopop.mo-vuepop .mo-vtb:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.mopop.mo-vuepop .mo-vtb.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--ink);font-weight:600}
.mopop.mo-vuepop .mo-vtb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mopop.mo-vuepop .mo-vta{font-weight:650;line-height:1;color:var(--ink)}
.mopop.mo-vuepop .mo-vta-petite{font-size:14px} .mopop.mo-vuepop .mo-vta-normale{font-size:18px} .mopop.mo-vuepop .mo-vta-grande{font-size:23px}
/* 28/10 · DOSSIERS ÉPINGLÉS, un mail ouvert : le volet garde sa largeur (256 px jusqu'à 1 366 px), la liste reste la colonne étroite
   d'habitude — la lecture garde la place qu'il lui faut (le bandeau de l'expéditeur se tassait sous 700 px). « Agrandir la lecture »
   (body.mlarge) passe toujours avant. */
@media(min-width:1101px){
  html body.mo-on.mo-on.mo-on:not(.mlarge) .mail4.mb.mo.mo.mo.moepingle:not(.mocache):has(.m3read .mdoc){grid-template-columns:var(--mo-wep,var(--mo-w)) var(--mo-lu,clamp(300px,22vw,460px)) minmax(0,1fr)!important}
}
@media(min-width:1101px) and (max-width:1366px){ html body.mo-on{--mo-wep:256px} }