/* ═══ BOÎTE MAIL « B » (mail-b/mb.js) — lecture large, onglets, favoris, bandeau ═══════════════
   Tout est sous « .mail4.mb » ou « .mbpop » : sans le script, rien ne change. Couleurs = jetons
   du hub (--surface, --line, --accent…) : le thème sombre suit sans règle en double ; les deux
   teintes d'enseigne passent par color-mix avec --surface / --ink pour la même raison.
   ⚠️ « !important » sur la grille : le hub pose une dizaine de gabarits de colonnes (rail,
   .ctxon, paliers 1300/1500/1700) plus précis les uns que les autres.                         */

/* ── la grille : deux colonnes, onglets et favoris sur toute la largeur ── */
html body .mail4.mb,html body.rail .mail4.mb,html body:not(.rail) .mail4.mb,
html body .mail4.mb.ctxon,html body.rail .mail4.mb.ctxon,html body:not(.rail) .mail4.mb.ctxon{
  grid-template-columns:clamp(340px,29vw,470px) minmax(0,1fr)!important;
  grid-template-rows:auto auto minmax(0,1fr)!important}
html body .mail4.mb.mbsansfav{grid-template-rows:auto minmax(0,1fr)!important}
.mail4.mb>.mrail,.mail4.mb>.mctx{display:none!important}
.mail4.mb>.mbbar{grid-column:1/-1;grid-row:1}
.mail4.mb>.mbfavs{grid-column:1/-1;grid-row:2}
.mail4.mb>.mliste2{grid-column:1;grid-row:3}
.mail4.mb>.mlect2{grid-column:2;grid-row:3}
.mail4.mb.mbsansfav>.mliste2,.mail4.mb.mbsansfav>.mlect2{grid-row:2}
@media(max-width:1100px){
  html body .mail4.mb,html body.rail .mail4.mb,html body:not(.rail) .mail4.mb,
  html body .mail4.mb.ctxon,html body.rail .mail4.mb.ctxon,html body:not(.rail) .mail4.mb.ctxon{grid-template-columns:minmax(0,1fr)!important}
  .mail4.mb>.mlect2{grid-column:1}
}
/* la colonne de contexte et la barre « suivi de la personne » : le bandeau B les remplace ici */
.mail4.mb [data-mctxbasc],.mail4.mb .mltete .mburger{display:none!important}
body.mb-on.mb-page #sfliCtx{display:none!important}

/* ── 1. les onglets ── */
.mail4.mb>.mbbar{display:flex;align-items:center;gap:10px;min-width:0;height:62px;padding:0 20px 0 12px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.mbtabs{display:flex;align-items:stretch;align-self:stretch;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.mbtabs::-webkit-scrollbar{display:none}
.mail4.mb .mbt{position:relative;display:inline-flex;align-items:center;gap:9px;height:auto;min-height:0;padding:0 15px;margin:0;
  border:0;border-radius:0;background:none;box-shadow:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;
  white-space:nowrap;cursor:pointer;transition:color .15s,background-color .15s}
.mail4.mb .mbt svg{width:17px;height:17px;flex:none}
.mail4.mb .mbt b{display:inline-grid;place-items:center;min-width:22px;height:21px;padding:0 7px;border-radius:99px;
  background:var(--sunk);color:var(--ink2);font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums}
.mail4.mb .mbt:hover{color:var(--ink)}
.mail4.mb .mbt.on{color:var(--ink);font-weight:650}
.mail4.mb .mbt.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2.5px;border-radius:3px 3px 0 0;background:var(--accent)}
.mail4.mb .mbt.on b{background:var(--accent-soft);color:var(--accent-strong)}
.mail4.mb .mbt.dsur{background:var(--accent-soft);color:var(--accent-strong)}   /* un mail glissé au-dessus */
.mail4.mb .mbdos>svg:last-child{width:14px;height:14px;margin-left:-3px;opacity:.7}
.mail4.mb .mbdos span{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.mail4.mb .mbpc{width:10px;height:10px;border-radius:3px;flex:none}
.mbsp{flex:1 1 auto;min-width:0}
.mail4.mb .mbnew{display:inline-flex;align-items:center;gap:8px;height:42px;min-height:0;padding:0 20px;border:0;border-radius:12px;
  background:var(--accent);color:var(--accent-ink,#fff);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;
  text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1);transition:background-color .15s}
.mail4.mb .mbnew:hover{background:var(--accent-strong)}
.mail4.mb .mbnew:active{filter:brightness(.95)}
.mail4.mb .mbnew svg{width:16px;height:16px}

/* ── la barre des favoris ── */
.mail4.mb>.mbfavs{display:flex;align-items:center;gap:4px;min-width:0;height:48px;padding:0 20px 0 24px;
  border-bottom:1px solid var(--line);background:var(--surface2)}
.mail4.mb .mbstar{display:grid;place-items:center;margin-right:8px;color:#e0a100;flex:none}
.mail4.mb .mbstar svg{width:16px;height:16px;fill:currentColor}
.mail4.mb .mbfavl{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.mail4.mb .mbfavl::-webkit-scrollbar{display:none}
.mail4.mb .mbfav{display:inline-flex;align-items:center;gap:9px;height:34px;min-height:0;padding:0 13px;margin:0;border:0;border-radius:10px;
  background:none;box-shadow:none;color:var(--ink2);font:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer;flex:none;
  transition:background-color .15s}
.mail4.mb .mbfav i{width:10px;height:10px;border-radius:3px;background:var(--faint);flex:none}
.mail4.mb .mbfav b{display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 6px;border-radius:99px;
  background:var(--sunk);color:var(--ink2);font-size:11px;font-weight:650}
.mail4.mb .mbfav:hover{background:var(--sunk)}
.mail4.mb .mbfav.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line2)}
.mail4.mb .mbfav.dsur{background:var(--accent-soft)}
.mail4.mb .mbfvide{color:var(--faint);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mail4.mb .mbfa,.mbpop .mbfa{display:inline-flex;align-items:center;gap:7px;height:34px;min-height:0;padding:0 11px;margin:0;border:0;border-radius:10px;
  background:none;box-shadow:none;color:var(--muted);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer;flex:none}
.mail4.mb .mbfa svg{width:15px;height:15px;flex:none}
.mail4.mb .mbfa:hover{background:var(--sunk);color:var(--ink)}
.mail4.mb .mbfavon svg{color:#e0a100}

/* ── 2. la liste : de l'air, une photo par ligne ── */
.mail4.mb .mltete{padding:18px 20px 12px}
.mail4.mb .mjour{padding:18px 20px 8px 22px!important}
.mail4.mb .mrows .mrow2,.mail4.mb .mrow2{grid-template-columns:42px minmax(0,1fr) auto!important;column-gap:14px!important;row-gap:2px!important;
  padding:14px 20px 14px 18px!important;contain-intrinsic-size:auto 96px}
body.nv .mail4.mb .mrow2::before{content:none!important}   /* les initiales de nv.js : remplacées par .mbav */
.mail4.mb .mrow2::after{left:74px!important}
.mail4.mb .mrow2>.mbav{grid-column:1;grid-row:1/span 3;align-self:start;margin-top:1px}
.mail4.mb .mrow2>.de{grid-column:2;grid-row:1}
.mail4.mb .mrow2>time{grid-column:3;grid-row:1}
.mail4.mb .mrow2>.obj{grid-column:2;grid-row:2}
.mail4.mb .mrow2>.pj{grid-column:3;grid-row:2}
.mail4.mb .mrow2>.ap{grid-column:2/4;grid-row:3}
/* la case de sélection se pose SUR la photo, au survol de la photo (ou en mode sélection) */
.mail4.mb .mrow2>.mck,body.nv .mail4.mb .mrow2>.mck{position:absolute;left:18px;top:15px;z-index:2;width:42px;height:42px;margin:0!important;
  display:grid;place-items:center;border-radius:50%;opacity:0;background:color-mix(in srgb,var(--surface) 82%,transparent)!important}
.mail4.mb .mrow2:hover>.mck{opacity:0}
/* ⚠️ « body.nv … .mck » (règle de base, plus précise) remettait la case à 0 même cochée : !important */
.mail4.mb .mrow2>.mck:hover,.mail4.mb .mrow2.sel>.mck,.mail4.mb.selon .mrow2>.mck{opacity:1!important}
.mail4.mb .mrow2>.mck i{width:18px;height:18px;border-radius:5px;background:var(--surface)}
.mail4.mb .mrow2.sel>.mck i{background:var(--accent)}
.mail4.mb .mrow2.sel>.mck i::after{left:5.5px;top:2px;width:4.5px;height:9px}
/* le point « non lu » dans la marge, à hauteur de la photo */
.mail4.mb .mrow2 .pt,body.nv .mail4.mb .mrows .mrow2 .pt,body.nv .mail4.mb .mrow2 .pt{left:6px!important;top:32px!important;width:7px!important;height:7px!important;
  box-shadow:none!important}
.mail4.mb .mrow2.nl .pt{opacity:1!important}
.mail4.mb .mrow2 .de{font-size:14px}
.mail4.mb .mrow2 .obj{font-size:13.5px}
.mail4.mb .mrow2 .ap{margin-top:2px}
.mail4.mb .mrow2.mbauto .de>span{color:var(--muted)}

/* ── l'avatar : photo de l'agent, sinon initiales ; envois automatiques en carré gris ── */
.mbav{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--mbav,#7d8a88);color:#fff;font-size:13px;font-weight:650;letter-spacing:.02em;line-height:1;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 6%,transparent)}
.mbav .ini{pointer-events:none;user-select:none}
.mbav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--sunk)}
.mbav.auto{border-radius:12px;background:var(--sunk);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.mbav.big{width:58px;height:58px;font-size:18px}
.mbav.big.auto{border-radius:16px}

/* ── 3. le bandeau de la personne ── */
.mail4.mb .m3read>.mbband{display:flex;align-items:flex-start;gap:18px;padding:20px 0 16px;border-bottom:1px solid var(--line)}
.mbband .mbid{flex:1 1 auto;min-width:0}
.mbband .mbnom{display:flex;align-items:center;gap:10px;min-width:0}
.mbband .mbnom b{font-size:19px;font-weight:650;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mbpill{flex:none;padding:3px 9px;border-radius:7px;font-style:normal;font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent-strong)}
.mbpill.lf{background:color-mix(in srgb,#e41d5d 13%,var(--surface));color:color-mix(in srgb,#e41d5d 60%,var(--ink))}
.mbpill.lmd{background:color-mix(in srgb,#e8722a 15%,var(--surface));color:color-mix(in srgb,#e8722a 60%,var(--ink))}
.mbpill.natimmo{background:color-mix(in srgb,#1da8a6 15%,var(--surface));color:color-mix(in srgb,#0b7471 75%,var(--ink))}   /* 26/10 : les 3 autres réseaux */
.mbpill.osmoz{background:color-mix(in srgb,#1f2328 10%,var(--surface));color:color-mix(in srgb,#1f2328 70%,var(--ink))}
.mbpill.icom{background:color-mix(in srgb,#0ea5e9 14%,var(--surface));color:color-mix(in srgb,#0369a1 75%,var(--ink))}
.mbpill.auto{background:var(--sunk);color:var(--muted)}
.mbband .mbmeta{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45;min-width:0}
.mbband .mbmeta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mbband .mbmeta span+span::before{content:"·";margin:0 9px;color:var(--faint)}
.mbband .mbacts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;flex:0 1 auto;max-width:62%}
.mbb{display:inline-flex;align-items:center;gap:7px;height:40px;min-height:0;padding:0 15px;margin:0;border:1px solid var(--line2);border-radius:11px;
  background:var(--surface);box-shadow:none;color:var(--ink2);font:inherit;font-size:13.5px;font-weight:550;white-space:nowrap;text-decoration:none;
  cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.mbb svg{width:16px;height:16px;flex:none}
.mbb>svg:last-child:not(:first-child){width:13px;height:13px;margin-left:-2px;opacity:.7}
.mbb:hover{background:var(--surface2);border-color:color-mix(in srgb,var(--ink) 28%,var(--line2));color:var(--ink)}
.mbb.pri{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--line2));color:var(--accent-strong)}
.mbb.pri:hover{border-color:var(--accent)}
.mbb.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-strong)}
.mbb.ico{width:40px;padding:0;justify-content:center}
.mbb b.num{display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 6px;border-radius:99px;background:var(--sunk);color:var(--ink2);font-size:11px;font-weight:650}
/* l'en-tête du message redisait le nom et l'avatar du bandeau : il garde l'adresse et la date */
.mail4.mb .mdoc .mhead .mav,.mail4.mb .mdoc .mhead>div>b{display:none}
.mail4.mb .mdoc .mhead{margin-top:6px}
.mail4.mb .mdoc{padding-top:14px}
.mail4.mb .mdoc h2{margin-top:10px}
@media(max-width:1300px){ .mbband .mbacts{max-width:none} .mail4.mb .m3read>.mbband{flex-wrap:wrap} .mbband .mbid{flex-basis:calc(100% - 80px)} .mbband .mbacts{justify-content:flex-start;margin-left:76px} }
@media(max-width:760px){ .mbband .mbacts{margin-left:0} .mail4.mb .mbnew span,.mail4.mb .mbfa span,.mail4.mb .mbt span{display:none}
  .mail4.mb .mbnew{width:42px;padding:0;justify-content:center} .mail4.mb .mbt.on span{display:inline} }

/* ── 4. les fenêtres (Dossiers ▾, Créer ▾, Toujours ranger dans…) ── */
.mbpop{position:fixed;z-index:1300;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow-pop,0 24px 60px rgba(0,0,0,.18));font-size:13.5px;animation:mbpop .14s cubic-bezier(.22,.9,.3,1)}
@keyframes mbpop{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.mbpop{animation:none}}
.mbpop button{font:inherit}
.mbpdos{width:360px;max-width:calc(100vw - 24px);max-height:min(680px,calc(100vh - 110px));display:flex;flex-direction:column}
.mbph{display:flex;align-items:center;gap:10px;padding:15px 16px 10px}
.mbpt{flex:1;min-width:0;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbph kbd{flex:none;padding:3px 6px;border:1px solid var(--line2);border-radius:6px;color:var(--muted);font:500 11px/1 inherit;background:var(--surface2)}
.mbq{display:flex;align-items:center;gap:9px;height:40px;margin:0 12px 6px;padding:0 12px;border:1.5px solid var(--line2);border-radius:11px;background:var(--surface)}
.mbq:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.mbq svg{width:15px;height:15px;color:var(--faint);flex:none}
.mbq input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:13.5px;box-shadow:none}
.mbdlist{flex:1 1 auto;min-height:0;overflow:auto;padding:2px 8px 10px;overscroll-behavior:contain}
.mbsec{padding:14px 10px 6px;font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mbsec em{font-style:normal;margin-left:4px;letter-spacing:0}
.mbdl{display:flex;align-items:center;border-radius:10px;transition:background-color .12s}
.mbdl:hover{background:var(--sunk)}
.mbdl.on{background:var(--accent-soft)}
.mbdl .go{flex:1;min-width:0;display:flex;align-items:center;gap:11px;height:38px;min-height:0;padding:0 11px;margin:0;border:0;border-radius:10px;
  background:none;box-shadow:none;color:var(--ink2);text-align:left;cursor:pointer}
.mbdl.on .go{color:var(--ink);font-weight:600}
.mbdl .go>i{width:10px;height:10px;border-radius:3px;background:var(--faint);flex:none}
.mbdl .go>svg{width:15px;height:15px;color:var(--muted);flex:none}
.mbdl .go>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbdl .go small{color:var(--faint);font-size:12px}
.mbdl .go>b{font-size:11.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.mbdl .go .fv{flex:none;color:#e0a100;display:grid}.mbdl .go .fv svg{width:14px;height:14px;fill:currentColor}
.mbdl.niv1 .go{padding-left:29px}.mbdl.niv2 .go{padding-left:47px}.mbdl.niv3 .go{padding-left:65px}
.mbdl .st{flex:none;display:grid;place-items:center;width:34px;height:34px;min-height:0;margin:0 2px 0 0;padding:0;border:0;border-radius:9px;
  background:none;box-shadow:none;color:var(--line2);cursor:pointer;transition:color .12s}
.mbdl .st svg{width:16px;height:16px}
.mbdl:hover .st{color:var(--faint)}
.mbdl .st:hover{color:#e0a100!important}
.mbdl .st.on{color:#e0a100}.mbdl .st.on svg{fill:currentColor}
.mbaide{margin:0;padding:8px 10px;color:var(--muted);font-size:12.5px;line-height:1.45}
.mbrg{display:flex;align-items:center;gap:8px;min-height:36px;padding:2px 4px 2px 10px;border-radius:10px;color:var(--ink2);font-size:12.5px}
.mbrg>span{flex:1;min-width:0;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbrg>span svg{width:14px;height:14px;color:var(--accent-strong);flex:none}
.mbrg button{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;min-height:0;padding:0 9px;margin:0;border:0;border-radius:8px;
  background:none;box-shadow:none;color:var(--muted);font-size:12.5px;cursor:pointer}
.mbrg button svg{width:14px;height:14px}
.mbrg button:hover{background:var(--sunk);color:var(--danger,#cf3f3f)}
.mbrg.cur{margin:4px 0 8px;background:var(--accent-soft)}
.mbpf{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-top:1px solid var(--line);background:var(--surface2);border-radius:0 0 15px 15px}
.mbpf button{display:inline-flex;align-items:center;gap:7px;height:34px;min-height:0;padding:0 11px;margin:0;border:0;border-radius:9px;
  background:none;box-shadow:none;color:var(--muted);font-size:12.5px;cursor:pointer}
.mbpf button svg{width:15px;height:15px}
.mbpf button:hover{background:var(--sunk);color:var(--ink)}
.mbpf.note{align-items:flex-start;flex-wrap:nowrap;gap:9px;padding:11px 15px 13px;color:var(--muted);font-size:12.5px;line-height:1.45}
.mbpf.note svg{width:15px;height:15px;flex:none;margin-top:1px}
.mbpcreer{width:310px;max-width:calc(100vw - 24px);padding:6px}
.mbmenu button{display:flex;align-items:flex-start;gap:13px;width:100%;min-height:0;padding:11px 12px;margin:0;border:0;border-radius:10px;
  background:none;box-shadow:none;color:var(--ink);text-align:left;cursor:pointer}
.mbmenu button:hover,.mbmenu button:focus-visible{background:var(--sunk);outline:0}
.mbmenu svg{width:18px;height:18px;margin-top:1px;flex:none;color:var(--accent-strong)}
.mbmenu b{display:block;font-size:13.5px;font-weight:600}
.mbmenu small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.35}

/* « Ranger » dans la barre du message (le menu « vers… » du hub reste, caché, pour le clavier) */
.mail4.mb .moutils.mbrg-on>.mdepl2{display:none}
.mail4.mb .moutils .mbranger{display:inline-flex;align-items:center;gap:7px;height:34px;min-height:0;padding:0 10px;margin:0;border:0;border-radius:9px;
  background:none;box-shadow:none;color:var(--ink2);font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.mail4.mb .moutils .mbranger:hover{background:var(--sunk);color:var(--ink)}
.mail4.mb .moutils .mbranger svg{width:16px;height:16px}
.mail4.mb .moutils .mbranger kbd{padding:1px 5px;border:1px solid var(--line2);border-radius:5px;color:var(--faint);font:500 10.5px/1.4 inherit}

/* ── Cci dans le rédacteur (mêmes classes que le Cc du hub) ── */
.rdw .mbccib{margin-left:0}
.rdw .rdccb+.mbccib{margin-left:2px}
.rdw .mbcci .evtinv input{min-width:0}

/* ── « Annuler » après un archivage / une corbeille / un rangement ── */
.mbannul{position:fixed;left:50%;bottom:calc(26px + var(--nf-nav,0px));z-index:1400;transform:translateX(-50%);display:flex;align-items:center;gap:6px;
  max-width:calc(100vw - 32px);padding:6px 6px 6px 18px;border-radius:14px;background:var(--ink,#171512);color:var(--surface,#fff);
  box-shadow:0 12px 32px rgba(0,0,0,.28);font-size:13.5px;animation:mbannul .18s cubic-bezier(.22,.9,.3,1)}
@keyframes mbannul{from{opacity:0;transform:translate(-50%,8px)}}
@media(prefers-reduced-motion:reduce){.mbannul{animation:none}}
@media(hover:none){.mbannul kbd{display:none}}   /* 21/10 : pas de ⌘Z sur un écran tactile */
.mbannul>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.mbannul button{display:inline-flex;align-items:center;gap:8px;height:34px;min-height:0;padding:0 12px;margin:0;border:0;border-radius:10px;
  background:color-mix(in srgb,var(--surface,#fff) 14%,transparent);box-shadow:none;color:inherit;font:inherit;font-weight:650;cursor:pointer;white-space:nowrap}
.mbannul button:hover{background:color-mix(in srgb,var(--surface,#fff) 24%,transparent)}
.mbannul kbd{font:500 11px/1 inherit;opacity:.65}
.mbannul .x{width:34px;padding:0;justify-content:center;background:none}
.mbannul .x svg{width:15px;height:15px}

/* ── pièces jointes lourdes (kDrive) : même puce que les pièces du hub, avec sa progression ── */
.rdw .mblourds{margin-top:6px}
.rdw .mblourd{position:relative;overflow:hidden}
.rdw .mblourd>svg{color:var(--accent-strong)}
.rdw .mblourd.erreur{border-color:color-mix(in srgb,var(--danger,#cf3f3f) 45%,var(--line2));color:var(--danger,#cf3f3f)}
.rdw .mblourd .mbprog{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--accent) 15%,transparent)}
.rdw .mblourd .mbprog>i{display:block;height:100%;background:var(--accent);transition:width .3s}
.rdw.mbdepot{outline:2px dashed var(--accent);outline-offset:-6px;border-radius:14px}

/* ── éditeur riche : la zone mise en forme remplace le champ texte (qui reste, caché, pour le hub) ── */
.rdzone.mbedon>#rdcorps{display:none!important}
.rdzone>.mbed{position:relative;flex:1 1 auto;min-height:206px;padding:16px 18px 12px;border-radius:14px 14px 0 0;outline:0;overflow:auto;
  font:inherit;font-size:14px;line-height:22px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
.rdzone>.mbed[hidden]{display:none!important}
.rdzone>.mbed.mbvide::before,.rdzone>.mbed:empty::before{content:attr(data-ph);color:var(--faint);pointer-events:none;position:absolute}
.rdzone>.mbed a{color:var(--accent-strong);text-decoration:underline}
.rdzone>.mbed ul,.rdzone>.mbed ol{margin:6px 0 10px 22px;padding:0;white-space:normal}
.rdzone>.mbed blockquote{margin:6px 0;padding:2px 0 2px 12px;border-left:3px solid var(--line2);color:var(--muted)}
.rdzone>.mbed[contenteditable="false"]{opacity:.6;cursor:progress}
.rdw .mbfmtm small{font-size:.72em;margin-left:1px}
.rdw .mbA{position:relative;display:inline-block;font-weight:700;line-height:1;padding-bottom:3px}
.rdw .mbA i{position:absolute;left:-2px;right:-2px;bottom:-1px;height:3px;border-radius:2px;background:linear-gradient(90deg,#cf3f3f,#e8722a,#1f9d6b,#3b6fd4)}
.mbpfmt{padding:6px}
.mbptaille{width:200px}
.mbptaille .mbmenu button{padding:8px 12px}
.mbpcoul{width:236px;padding:12px}
.mbcoul .mbcl{display:block;margin:2px 2px 7px;font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mbcoul .mbcg{display:grid;grid-template-columns:repeat(5,32px);gap:8px;margin-bottom:12px}
.mbcoul .mbcg:last-child{margin-bottom:0}
.mbcoul .mbcg button{width:32px;height:32px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 12%,transparent);transition:box-shadow .12s}
.mbcoul .mbcg button:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 12%,transparent),0 0 0 3px color-mix(in srgb,var(--c,var(--ink)) 30%,transparent)}   /* la lueur, pas le grossissement (Q12) */
.mbcoul .mbcg button.f{border-radius:8px}
.mbcoul .mbcg button.aucun{display:grid;place-items:center;background:var(--surface);color:var(--muted)}
.mbcoul .mbcg button.aucun svg{width:14px;height:14px}
/* la barre de mise en forme, sur sa ligne en tête du cadre du message */
.rdzone>.mbbarrefmt{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 10px;border-bottom:1px solid var(--line);
  border-radius:14px 14px 0 0;background:var(--surface2)}
.rdzone>.mbbarrefmt[hidden]{display:none}
.rdzone>.mbbarrefmt .mbsep{width:1px;height:18px;margin:0 6px;background:var(--line2)}
.rdzone>.mbbarrefmt .rdico svg{width:16px;height:16px}
.rdzone.mbedon>.mbbarrefmt:not([hidden])~.mbed{border-radius:0}
/* « + Cc » et « + Cci » restent sur la ligne du destinataire : c'est l'aide « Uplines » qui se resserre.
   ⚠️ 25/09 (audit parcours M5-4) : sur téléphone (390 px), « nowrap » + 240 px minimum pour l'adresse
   poussaient « + Cc » et « + Cci » HORS de la fenêtre (défilement horizontal). Au-dessus de 760 px
   seulement ; en dessous, la ligne passe à la ligne comme dans le hub. */
@media(min-width:761px){
  .rdw .rdchampa:has(.mbccib){flex-wrap:nowrap}
  .rdw .rdchampa:has(.mbccib) .rdupl{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .rdw .rdchampa:has(.mbccib) #rda{flex:1 0 240px}
}

/* ── suivi d'équipe : puces sur les lignes ── */
.mail4.mb .mrow2 .de small.mbsv{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:2px;padding:0;background:none;font-size:10.5px;line-height:18px;color:var(--muted)}
.mbsv>i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.mbsv>b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--c);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:0}
/* ⚠️ 25/09 (audit parcours M5-9) : #a87515 seul = 4,2:1 en thème sombre (10,5 px) ; mêlé à l'encre, il suit le thème */
.mbsv>em{display:inline-flex;align-items:center;gap:2px;font-style:normal;font-weight:600;color:color-mix(in srgb,#a87515 72%,var(--ink))}
.mbsv>em svg{width:11px;height:11px}
/* ⚠️ 24/09 (audit parcours M1-1) : le masquage CSS de « À moi » (.mbfamoi) est retiré — les lignes cachées restaient
   sélectionnables. Le filtre est désormais un filtre de données (sfMailFiltreB, mb.js) : elles ne sont plus dessinées. */

/* ── suivi d'équipe : la ligne sous le bandeau de la personne ── */
.mail4.mb .m3read>.mbeqz{padding:0 0 14px;border-bottom:1px solid var(--line)}
.mbeq{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mbeqb{display:inline-flex;align-items:center;gap:7px;height:34px;min-height:0;padding:0 12px;margin:0;border:1px solid var(--line2);border-radius:10px;
  background:var(--surface);box-shadow:none;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.mbeqb:hover{background:var(--surface2);border-color:color-mix(in srgb,var(--ink) 25%,var(--line2))}
.mbeqb>svg{width:15px;height:15px;flex:none}
.mbeqb>svg:last-child:not(:first-child){width:13px;height:13px;opacity:.6;margin-left:-2px}
.mbeqb b{font-weight:650;color:var(--ink)}
/* ⚠️ 25/09 (audit parcours M5-9) : pastille beige codée en dur (#f8eed7) = tache claire en thème sombre — mêlée à la surface et à l'encre */
.mbeqb em{font-style:normal;display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:color-mix(in srgb,#f5d565 18%,var(--surface));color:color-mix(in srgb,#8a5e0c 45%,var(--ink));font-size:11px;font-weight:700}
.mbeqb.on{background:color-mix(in srgb,#f5d565 22%,var(--surface));border-color:color-mix(in srgb,#d9a514 45%,var(--line2))}
.mbeqav{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--c,#7d8a88);color:#fff;font-size:9.5px;font-weight:700}
.mbeqav.mbvide{background:var(--sunk);color:var(--muted)}.mbeqav.mbvide svg{width:12px;height:12px}
.mbdot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}
.mbdot.mbvide{background:none;box-shadow:inset 0 0 0 1.5px var(--faint)}
.mbeqmaj{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap}
.mbnotes{margin-top:12px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,#f5d565 16%,var(--surface));border:1px solid color-mix(in srgb,#d9a514 28%,var(--line))}
.mbnote{display:flex;gap:10px;padding:6px 0}
.mbnote+.mbnote{border-top:1px dashed color-mix(in srgb,#d9a514 30%,var(--line))}
.mbnote>div{min-width:0;flex:1}
.mbnt{display:flex;align-items:center;gap:8px;font-size:12.5px}
.mbnt b{color:var(--ink)}.mbnt time{color:color-mix(in srgb,var(--ink) 70%,var(--surface))}   /* M5-9 : --faint = 3,7:1 sur le jaune des notes en sombre */
.mbnt button{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;min-height:0;padding:0;border:0;border-radius:7px;background:none;color:var(--faint);cursor:pointer}
.mbnt button:hover{background:var(--sunk);color:var(--danger,#cf3f3f)}.mbnt button svg{width:13px;height:13px}
.mbnote p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}
.mbnote mark{background:none;color:var(--accent-strong);font-weight:650}
.mbnvide{margin:0 0 10px;font-size:13px;color:var(--muted)}
.mbnform{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.mbnform textarea{flex:1;min-width:0;min-height:40px;max-height:160px;padding:9px 12px;border:1px solid color-mix(in srgb,#d9a514 30%,var(--line2));border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;line-height:1.45;resize:vertical;outline:0}
.mbnform textarea:focus{border-color:#d9a514;box-shadow:0 0 0 3px color-mix(in srgb,#f5d565 30%,transparent)}
.mbnform .mbb{height:40px}
.mbpeq{width:280px;max-height:min(460px,calc(100vh - 120px));overflow:auto;padding:6px}
.mbpeq .mbmenu button{align-items:center;padding:8px 10px}
.mbpeq .mbmenu button.on{background:var(--accent-soft)}
.mbpeq .mbmenu .mbdot{margin:0 3px}

/* 24/09 soir : « le suivi est trop bas » — les contrôles d'équipe passent DANS le bandeau, sous le nom */
.mbband .mbeq{margin-top:10px;gap:6px}
.mbband .mbeqb{height:30px;padding:0 10px;border-radius:9px;font-size:12.5px;gap:6px}
.mbband .mbeqb .mbeqav{width:19px;height:19px;font-size:8.5px}
.mbband .mbeqmaj{margin-left:4px;font-size:11.5px}
.mbband .mbacts{margin-top:6px}
.mbband>.mbav.big{margin-top:2px}

/* ═══ 24/09 soir : « enlève l'assistant mais en bouton, les favoris en option, remonte le plus possible les mails » ═══ */
body.mb-on.mb-page #content>.iabar{display:none!important}          /* l'assistant = le bouton « Assistant » des onglets */
.mail4.mb .mbia svg{color:var(--accent-strong)}
.mail4.mb>.mbbar{height:52px;gap:8px}
.mail4.mb .mbt{padding:0 13px}
.mail4.mb .mbnew{height:38px;padding:0 16px;border-radius:11px}
/* en-tête de liste sur deux lignes au lieu de quatre : titre + chiffres + Messages/Personnes, puis la recherche */
.mail4.mb .mltete{padding:10px 16px 8px}
.mail4.mb .mltete h1{grid-template-columns:auto minmax(0,1fr) auto;row-gap:0}
.mail4.mb .mltete .mtit>b{grid-column:1;grid-row:1;font-size:17px}
.mail4.mb .mltete .mtit>span{grid-column:2;grid-row:1;margin-left:6px;align-self:center}
.mail4.mb .mltete .mtit>span:empty{min-height:0}
.mail4.mb .mbasc{grid-column:3;grid-row:1}
/* ⚠️ 25/09 (audit parcours M5-9) : sur une liste étroite (1440, 1280, 1101, 390 px ; compact 1366), les chiffres
   étaient coupés (« 1 non lu · … », le total disparaissait). S'ils ne tiennent pas à côté du titre, mb.js pose
   .mbt2 et ils passent sur leur propre ligne, en pleine largeur, sous le titre. */
.mail4.mb .mltete.mbt2 .mtit>span{grid-column:1/-1;grid-row:2;margin-left:0;margin-top:1px}
.mail4.mb .mrech{margin-top:8px}
.mail4.mb .mfilt{padding:0 12px 6px 14px}
.mail4.mb .mfilt button{height:26px}
.mail4.mb .mjour{padding:12px 20px 5px 22px!important}
.mail4.mb .mrows .mrow2,.mail4.mb .mrow2{padding:12px 20px 12px 18px!important}
.mail4.mb .mrow2>.mck,body.nv .mail4.mb .mrow2>.mck{top:13px}
.mail4.mb .mrow2 .pt,body.nv .mail4.mb .mrows .mrow2 .pt,body.nv .mail4.mb .mrow2 .pt{top:30px!important}
.mail4.mb .m3read>.mbband{padding:14px 0 12px}
.mail4.mb .mdoc{padding-top:10px}

/* ═══ affichage compact : une ligne par mail (photo · expéditeur · objet + début du message · heure) ═══ */
.mail4.mb .mfilt .mbdens{display:inline-grid;place-items:center;width:28px;height:26px;min-height:0;padding:0!important;margin-left:auto;border:0;border-radius:8px;
  background:none;color:var(--muted);cursor:pointer}
.mail4.mb .mfilt .mbdens:hover{background:var(--sunk);color:var(--ink)}
.mail4.mb .mfilt .mbdens svg{width:16px;height:16px}
html body .mail4.mb.mbcompact,html body.rail .mail4.mb.mbcompact,html body:not(.rail) .mail4.mb.mbcompact,
html body .mail4.mb.mbcompact.ctxon,html body.rail .mail4.mb.mbcompact.ctxon,html body:not(.rail) .mail4.mb.mbcompact.ctxon{
  grid-template-columns:clamp(360px,36vw,580px) minmax(0,1fr)!important}
@media(max-width:1100px){
  html body .mail4.mb.mbcompact,html body.rail .mail4.mb.mbcompact,html body:not(.rail) .mail4.mb.mbcompact,
  html body .mail4.mb.mbcompact.ctxon,html body.rail .mail4.mb.mbcompact.ctxon,html body:not(.rail) .mail4.mb.mbcompact.ctxon{grid-template-columns:minmax(0,1fr)!important}
}
.mail4.mb.mbcompact .mrows .mrow2,.mail4.mb.mbcompact .mrow2{
  grid-template-columns:28px minmax(0,30%) minmax(0,max-content) minmax(0,1fr) auto!important;grid-template-rows:auto!important;
  align-items:center;row-gap:0!important;column-gap:10px!important;padding:7px 16px!important;contain-intrinsic-size:auto 42px}
.mail4.mb.mbcompact .mrow2>.mbav{grid-column:1;grid-row:1;width:28px;height:28px;margin:0;font-size:10px}
.mail4.mb.mbcompact .mrow2>.de{grid-column:2;grid-row:1;min-height:0;font-size:13.5px}
.mail4.mb.mbcompact .mrow2>.obj{grid-column:3;grid-row:1;font-size:13.5px}
.mail4.mb.mbcompact .mrow2>.ap{grid-column:4;grid-row:1;margin:0;font-size:13px}
.mail4.mb.mbcompact .mrow2>time{grid-column:5;grid-row:1;font-size:12px}
.mail4.mb.mbcompact .mrow2>.pj,.mail4.mb.mbcompact .mrow2 .de small.adh,.mail4.mb.mbcompact .mrow2 .mbsv>b,.mail4.mb.mbcompact .mrow2 .mbsv>em{display:none}
.mail4.mb.mbcompact .mrow2>.mck,body.nv .mail4.mb.mbcompact .mrow2>.mck{left:16px;top:7px;width:28px;height:28px}
.mail4.mb.mbcompact .mrow2>.mck i{width:15px;height:15px}
.mail4.mb.mbcompact .mrow2 .pt,body.nv .mail4.mb.mbcompact .mrows .mrow2 .pt,body.nv .mail4.mb.mbcompact .mrow2 .pt{left:5px!important;top:calc(50% - 3px)!important;width:6px!important;height:6px!important}
.mail4.mb.mbcompact .mrow2::after{left:54px!important}
.mail4.mb.mbcompact .mrow2.nl .de>span,.mail4.mb.mbcompact .mrow2.nl .obj{font-weight:650;color:var(--ink)}
.mail4.mb.mbcompact .mjour{padding:10px 16px 4px!important}
.mail4.mb.mbcompact .mxact{top:50%;transform:translateY(-50%)}

/* « Avec pièces » retiré des filtres (demande du 24/09) */
.mail4.mb .mfilt [data-mailf="pj"]{display:none!important}
/* sélection à la souris : pendant le balayage, pas de sélection de texte, curseur de cochage */
body.mbbalaie,body.mbbalaie *{user-select:none!important;cursor:cell!important}
.mail4.mb .mrow2>.mbav{cursor:pointer}
/* ⚠️ 24/09 (audit parcours M5-8) : B ajoute 3 à 4 entrées au clic droit — plafonné à 560 px, le menu cachait
   « Marquer comme lu », « Marquer » et « Supprimer » sous un défilement invisible. Il prend toute la hauteur de
   l'écran (mb.js le recale en haut s'il le faut) et, s'il doit quand même défiler, une ombre le dit en haut / en bas. */
body.mb-on #mmenu{max-height:calc(100dvh - 16px)!important;
  background:linear-gradient(var(--surface) 30%,transparent) center top/100% 28px no-repeat local,
    linear-gradient(transparent,var(--surface) 70%) center bottom/100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(15,23,42,.18),transparent) center top/100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(15,23,42,.18),transparent) center bottom/100% 10px no-repeat scroll,
    var(--surface)!important}

/* ⚠️ 25/09 (audit parcours M5-3) : sous 1100 px, la bande d'onglets débordait SANS indice (barre de défilement
   masquée) : à 900 px, Brouillons, Envoyés et Dossiers étaient hors de l'écran. Désormais :
   · « Dossiers ▾ » est hors de la bande (mb.js) : toujours visible, même hauteur que les onglets ;
   · les paliers « icône seule » (fenêtre ≤ 1279 / 1180 px) ont été remplacés le 07/10 par ceux, mesurés sur la barre, de la
     section « MAIL v3 » en fin de fichier (le relevé de largeurs n'a montré aucune différence) ;
   · si la bande déborde encore (téléphone), un fondu au bord droit le signale (classe posée par mb.js). */
.mail4.mb>.mbbar>.mbdos{align-self:stretch;flex:none}
/* 06/10 : à 1 440 px AVEC le menu du hub, la barre ne fait que ~1 176 px — « Envoyés » passait derrière le bord (onglet
   caché, ou « Réception » coupé après défilement). La place se mesure sur la BARRE (requête de conteneur), pas sur la
   fenêtre (les paliers : section « MAIL v3 »). */
.mail4.mb>.mbbar{container-type:inline-size}
/* téléphone : les onglets prennent toute la première ligne, « Dossiers ▾ », Assistant, Favoris et « Nouveau mail »
   passent sur la seconde — une rangée de plus plutôt qu'un onglet caché */
@media(max-width:480px){ .mail4.mb>.mbbar{flex-wrap:wrap;height:auto;gap:0 4px;padding:0 8px 4px 4px}
  .mail4.mb>.mbbar>.mbtabs{flex:1 0 100%;height:46px} .mail4.mb .mbtabs .mbt,.mail4.mb>.mbbar>.mbdos{padding:0 9px}
  .mail4.mb>.mbbar>.mbdos span{display:inline} }

/* ⚠️ 25/09 (audit parcours M5-1) : jusqu'à 1100 px, le message s'ouvre dans la fenêtre du hub — le bandeau B
   (fiche, Créer ▾, Ranger, suivi d'équipe, notes internes) s'y pose en tête, comme dans le volet. La carte
   du hub garde l'adresse, la date et l'objet ; son avatar et le nom (déjà dans le bandeau) s'effacent. */
#modalBox>.mailread>.mbband{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px;padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--line)}
#modalBox>.mailread>.mbband .mbid{flex:1 1 calc(100% - 76px)}
#modalBox>.mailread>.mbband .mbacts{max-width:none;justify-content:flex-start;margin:0}
#modalBox>.mailread>.mbeqz{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--line)}
#modalBox>.mailread>.mbeqz .mbnotes{margin-top:0}
#modalBox>.mailread.mbhab .mband .mexpav,#modalBox>.mailread.mbhab .mband .mexpx>b{display:none}
#modalBox .mlact .mbranger svg{width:16px;height:16px}
@media(max-width:560px){ #modalBox>.mailread>.mbband .mbav.big{width:46px;height:46px;font-size:15px} #modalBox>.mailread>.mbband .mbid{flex-basis:calc(100% - 62px)} }
.mail4.mb .mbtabs.mbdeb{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}

/* ═══ 28/09 · « trop de bruit, pas assez visuel » ═══════════════════════════════════════════════════════════
   Les envois automatiques : la couleur de la marque (initiale), sinon une icône de catégorie — plus de carré gris.
   Les notifications d'un jour repliées en UNE ligne (index.html → sfMailNotifLigne) : pastilles des expéditeurs,
   « N notifications · X non lues », les noms, « Lu » / « Archiver » au survol, flèche pour déplier. */
.mbav.auto.mq{background:var(--mbav);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 8%,transparent)}
.mbav.auto.cat{background:var(--mbf);color:var(--mbc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mbc) 16%,transparent)}
.mbav.auto.cat svg{width:19px;height:19px}
.mail4.mb.mbcompact .mrow2>.mbav.auto.cat svg{width:14px;height:14px}
.mnotif{display:flex;align-items:center;gap:14px;margin:6px 12px;padding:10px 12px 10px 14px;border-radius:14px;background:var(--sunk);
  color:var(--ink);cursor:pointer;transition:background-color .15s,box-shadow .15s}
.mnotif:hover{background:color-mix(in srgb,var(--accent) 7%,var(--sunk))}
.mnotif:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mnotif.ouvert{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.mnvis{display:flex;flex:none;padding-left:8px}
.mnvis .mnav{width:30px;height:30px;margin-left:-8px;border-radius:9px;font-size:11.5px;font-style:normal;box-shadow:0 0 0 2px var(--sunk)}
.mnotif.ouvert .mnvis .mnav,.mnotif:hover .mnvis .mnav{box-shadow:0 0 0 2px var(--surface)}
.mnvis .mnav svg{width:15px;height:15px}
.mntx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mntx b{display:flex;align-items:baseline;gap:8px;font-size:13.5px;font-weight:650;line-height:1.3}
.mntx b em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--accent-strong)}
.mntx>span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnotif.nl .mntx>span{color:var(--ink2)}
.mnact{flex:none;display:flex;align-items:center;gap:4px}
.mnact button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;opacity:0;transition:opacity .15s,background-color .15s}
.mnotif:hover .mnact button,.mnotif:focus-within .mnact button{opacity:1}
.mnact button svg{width:14px;height:14px}
.mnact button:hover{background:var(--sunk)}
.mnchev{display:grid;place-items:center;width:26px;height:26px;color:var(--muted);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.mnchev svg{width:16px;height:16px}
.mnotif.ouvert .mnchev{transform:rotate(180deg)}
.mail4.mb.mbcompact .mnotif{margin:4px 10px;padding:7px 10px}
.mail4.mb.mbcompact .mnvis .mnav{width:24px;height:24px;border-radius:7px}
@media (hover:none){.mnact button{opacity:1}}
@media (max-width:560px){.mnact button span{display:none}.mnact button{padding:0 8px}.mnotif{gap:10px;margin:6px 8px}}
@media (prefers-reduced-motion:reduce){.mnchev,.mnotif,.mnact button{transition:none}}
/* la liste fait ~420 px : « Lu » / « Archiver » invisibles gardaient leur place et « 2 notifications · 2 non lues »
   se coupait mot à mot → au survol, ils se posent PAR-DESSUS la fin de la ligne ; le texte garde toute la largeur */
.mnotif{position:relative}
.mntx b{flex-wrap:wrap;row-gap:0}
.mntx b,.mntx b em{white-space:nowrap}
.mnact{position:static}
.mnact button{position:relative;z-index:1}
@media (hover:hover){
  .mnact .mnbtns{position:absolute;right:46px;top:50%;transform:translateY(-50%);display:flex;gap:4px;padding-left:28px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 7%,var(--sunk)) 26px);pointer-events:none;opacity:0;transition:opacity .15s}
  .mnotif.ouvert .mnact .mnbtns{background:linear-gradient(90deg,transparent,var(--surface) 26px)}
  .mnotif:hover .mnact .mnbtns,.mnotif:focus-within .mnact .mnbtns{opacity:1;pointer-events:auto}
  .mnact button{opacity:1}
}
@media (hover:none){.mnact button span{display:none}.mnact button{padding:0 8px}}

/* ═══ 28/09 · « PLUS AÉRÉE » (Quentin : « qu'est-ce qu'il faut faire pour que ce soit la meilleure, mails plus aérés ») ═══
   Moins de traits, plus de blanc, une colonne de lecture étroite. Seulement l'affichage normal : le compact (≡) reste
   serré, c'est son rôle. La liste : plus de filet entre les lignes — des lignes arrondies qui respirent ; la lecture :
   bandeau et barre d'outils sans traits, grand titre, texte en 15 px sur une colonne de lecture (≈ 68 caractères). */
html body .mail4.mb:not(.mbcompact) .mltete{padding:24px 22px 14px}
html body .mail4.mb:not(.mbcompact) .mfilt{padding:2px 14px 10px 16px}
html body .mail4.mb:not(.mbcompact) .mrows{padding:0 10px 40px}
html body .mail4.mb:not(.mbcompact) .mjour{padding:26px 14px 8px!important;border:0!important;box-shadow:none!important;background:var(--surface)}
html body .mail4.mb:not(.mbcompact) .mrows .mrow2,html body .mail4.mb:not(.mbcompact) .mrow2{padding:15px 14px!important;margin:1px 0;border-radius:16px;row-gap:3px!important;
  transition:background-color .15s}
html body .mail4.mb:not(.mbcompact) .mrow2::after{display:none!important}
html body .mail4.mb:not(.mbcompact) .mrow2.on{box-shadow:none!important}
html body .mail4.mb:not(.mbcompact) .mrow2>.mck,html body.nv .mail4.mb:not(.mbcompact) .mrow2>.mck{left:14px;top:15px}
html body .mail4.mb:not(.mbcompact) .mrow2 .pt,html body.nv .mail4.mb:not(.mbcompact) .mrows .mrow2 .pt,html body.nv .mail4.mb:not(.mbcompact) .mrow2 .pt{left:2px!important;top:33px!important}
html body .mail4.mb:not(.mbcompact) .mrow2 .de{font-size:14.5px}
html body .mail4.mb:not(.mbcompact) .mrow2 .obj{font-size:14px}
html body .mail4.mb:not(.mbcompact) .mrow2 .ap{margin-top:3px;font-size:13px;color:var(--muted)}
html body .mail4.mb:not(.mbcompact) .mnotif{margin:6px 0}
/* la lecture */
html body .mail4.mb .m3read{padding:0 clamp(28px,3.4vw,64px) 64px}
html body .mail4.mb .m3read>.mbband{padding:28px 0 18px;border-bottom:0}
html body .mail4.mb .m3read>.moutils{padding:8px 0 12px;border-bottom:0;gap:4px;background:var(--mbfond,var(--surface))}
html body .mail4.mb .m3read .mdoc{padding-top:28px}
html body .mail4.mb .m3read .mdoc .in{max-width:820px}
html body .mail4.mb .m3read .mdoc h2{font-size:27px;line-height:1.22;margin:0 0 12px}
html body .mail4.mb .m3read .mhead{border-bottom:0;padding-bottom:0;margin-bottom:30px}
html body .mail4.mb .m3read .mcorps{font-size:15px;line-height:1.75;max-width:680px}
html body .mail4.mb .m3read .mcorps p{margin:0 0 1em}
html body .mail4.mb .m3read .mpretes{margin-top:40px;gap:7px}
html body .mail4.mb .m3read .mpretes button{height:34px;padding:0 14px}
html body .mail4.mb .m3read .mrapide{margin-top:16px}
html body .mail4.mb .m3read .sflisuites{margin-top:44px;border-top:0;padding-top:0}
html body .mail4.mb .m3read .mliens{margin-top:32px;border-top:0;padding-top:0}
@media(max-width:1100px){html body .mail4.mb .m3read{padding:0 18px 36px}html body .mail4.mb .m3read .mdoc h2{font-size:22px}html body .mail4.mb .m3read>.mbband{padding:20px 0 14px}}
@media(max-width:560px){html body .mail4.mb:not(.mbcompact) .mrows{padding:0 6px 32px}html body .mail4.mb:not(.mbcompact) .mjour{padding:20px 12px 6px!important}}

/* ═══ 29/09 · « que les mails s'affichent super bien, en grand » ═══
   · mail HTML : toute la largeur de lecture (plus de 680 px), à SA hauteur (sfMailCadreAjuste) — un seul ascenseur ;
   · mail texte : un peu plus grand ;
   · « Agrandir la lecture » (body.mlarge) : la liste se retire tant qu'un message est ouvert. */
html body .mail4.mb .m3read .mcorps.mhtml{max-width:none}
html body .mail4.mb .m3read .mdoc .in:has(iframe.mhtml){max-width:1040px}
html body .mail4.mb .m3read .mcorps:not(.mhtml){font-size:16px;line-height:1.75;max-width:720px}
html body .mail4 iframe.mcorps.mhtml{width:100%}
html body iframe.mcorps.mhtml.ajuste{min-height:0!important;max-height:none!important}
body.mlarge .mail4.mb:has(.m3read .mdoc){grid-template-columns:minmax(0,1fr)!important}
body.mlarge .mail4.mb:has(.m3read .mdoc)>.mliste2{display:none!important}
body.mlarge .mail4.mb:has(.m3read .mdoc)>.mlect2{grid-column:1/-1!important}
body.mlarge .mail4.mb .m3read .mdoc .in{max-width:1180px}
body.mlarge .mail4.mb .m3read .mcorps:not(.mhtml){max-width:760px}
.mail4 .moutils .mlarge-b{margin-right:4px}
body.mlarge .mail4 .moutils .mlarge-b{color:var(--accent-strong,#12807d);background:color-mix(in srgb,var(--accent,#1da8a6) 12%,transparent)}
body.mlarge .mail4.mb .m3read .mdoc .in{margin-inline:auto}

/* ═══ 06/10 · la ligne de tri sous le message (« N'attend rien », « Plus tard », « Pub ») ═══════════════════
   Affichée dans la boîte B (lecture large et fenêtre) : une ligne discrète, sans cadre, sous les réponses prêtes. */
.mail4.mb .mbac,#modalBox>.mailread .mbac{border:0;background:none;padding:2px 2px 0;margin:2px 0 12px;gap:4px 16px}

/* ═══ 07/10 · « À jour » et les nouveaux messages (MAIL socle, D-31) ═══════════════════════════════════════════════
   La ligne d'état sous les filtres ; la pastille « ↑ N nouveaux messages » posée PAR-DESSUS la liste (absolue, hors du
   flux : rien ne bouge quand elle paraît), À DROITE : l'en-tête de jour collant (« Cette semaine »…) est à gauche, une
   pastille centrée le recouvrait sur un téléphone ; les lignes arrivées lavées. */
.mail4.mb .mbsyncz{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;min-width:0;margin-top:4px;font-size:12px;color:var(--faint)}
.mail4.mb .mbsyncz:empty{display:none}
.mail4.mb .mbcompte{white-space:nowrap}
.mail4.mb .mbsyncd{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 8px;min-width:0}
.mail4.mb .mbsync{min-width:0;text-align:right}
.mail4.mb .mbsync.erreur{color:#b8322f}
:root[data-theme="dark"] .mail4.mb .mbsync.erreur{color:#f0807b}   /* 08/10 : #b8322f ne faisait que 2,75:1 sur la carte sombre ; 6,3:1 */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .mail4.mb .mbsync.erreur{color:#f0807b}}
.mail4.mb .mbsync.hors{color:var(--muted)}
.mail4.mb .mbsyncr{height:26px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--ink2);font:inherit;font-size:12px;cursor:pointer;transition:background-color .15s}
.mail4.mb .mbsyncr:hover{background:var(--sunk)}
.mail4.mb a.mbsyncr{display:inline-flex;align-items:center;text-decoration:none;white-space:normal;height:auto;min-height:26px;padding-top:2px;padding-bottom:2px}   /* 08/10 : « Mettre à jour le mot de passe » — une ancre, qui passe à la ligne au lieu de déborder */
/* 08/10 (résidus, 3) : la raison précise de la panne, sous la ligne d'état, sur toute la largeur ; elle passe à la ligne (téléphone compris), jamais coupée */
.mail4.mb .mbsyncw{flex:1 0 100%;min-width:0;font-size:12px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.mail4.mb>.mliste2{position:relative}
.mail4.mb>.mliste2>.mbneufs{position:absolute;left:0;right:0;z-index:5;display:flex;justify-content:flex-end;box-sizing:border-box;padding-right:14px;pointer-events:none}
.mail4.mb>.mliste2>.mbneufs button{pointer-events:auto;padding:7px 14px;border:0;border-radius:99px;background:var(--accent-strong,#12807d);color:#fff;font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.35);transition:background-color .15s}
.mail4.mb>.mliste2>.mbneufs button:hover{background:color-mix(in srgb,var(--accent-strong,#12807d) 80%,#000)}
.mail4.mb .mrow2.mbneuf{background:color-mix(in srgb,var(--accent,#1da8a6) 9%,var(--surface))}

/* ═══ 07/10 · MAIL v3 — A « un seul bandeau », couleurs contrastées, cartes (sous-projet MAIL socle, D-32) ═══════════════
   Maquette : conception/mail-v3/a.html dans son dernier état (body.pal2.pal3.pal4.nvshell, 06-07/10 : « la A, mais les
   couleurs améliore-les » → « accentue encore » → « accentue surtout la séparation, un peu plus de couleurs foncées » →
   « base-toi sur la nouvelle version » → « ça doit prendre toute la place ») et dossiers-complet.html.
   · trois cartes détachées (bandeau, liste, lecture) sur un fond plus soutenu, toujours clair ;
   · tons forts en pétrole foncé, tirés des jetons du hub (color-mix) ; en sombre le hub éclaircit --accent-strong, le fond plein
     (--v3p, texte blanc ≥ 4,5:1) repart donc de --accent assombri, et le ton posé en texte ou en trait sur la carte (--v3pt) reste clair ;
   · la recherche vit DANS le bandeau (mb.js la déplace) ; plus de titre « Réception » au-dessus de la liste ;
   · rien ne bouge au survol ni à l'appui : couleur, fond, filet seulement (D-28). */
body.mb-on{--v3p:color-mix(in srgb,var(--accent-strong,#12807d) 62%,var(--ink,#171512));
  --v3p2:color-mix(in srgb,var(--accent-strong,#12807d) 48%,var(--ink,#171512));
  --v3pt:var(--v3p);   /* le ton fort POSÉ SUR la carte en trait ou en texte : point des non lus, filet de la ligne ouverte, en-tête de jour */
  --v3fond:color-mix(in srgb,var(--accent,#1da8a6) 12%,var(--bg,#f4f6f6));
  --v3teinte:color-mix(in srgb,var(--accent,#1da8a6) 13%,var(--surface,#fff));
  --v3lave:color-mix(in srgb,var(--accent,#1da8a6) 5%,var(--surface,#fff));
  --v3ligne:color-mix(in srgb,var(--accent,#1da8a6) 14%,var(--line,#e6ebeb));
  --v3ombre:0 1px 2px rgba(13,42,41,.08),0 6px 18px -8px rgba(13,42,41,.16)}
:root[data-theme="dark"] body.mb-on{--v3p:color-mix(in srgb,var(--accent,#1da8a6) 80%,#000);--v3p2:color-mix(in srgb,var(--accent,#1da8a6) 66%,#000);--v3pt:var(--accent-strong,#7dbcb9);--v3ombre:0 1px 2px rgba(0,0,0,.4)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body.mb-on{--v3p:color-mix(in srgb,var(--accent,#1da8a6) 80%,#000);--v3p2:color-mix(in srgb,var(--accent,#1da8a6) 66%,#000);--v3pt:var(--accent-strong,#7dbcb9);--v3ombre:0 1px 2px rgba(0,0,0,.4)}}

/* ── la boîte : trois cartes sur un fond plus soutenu ── */
html body .mail4.mb{gap:12px;padding:12px;background:var(--v3fond);border:0;box-shadow:none;border-radius:22px}
.mail4.mb>.mbbar,.mail4.mb>.mbfavs,.mail4.mb>.mliste2,.mail4.mb>.mlect2{background:var(--surface);border:0!important;border-radius:18px;box-shadow:var(--v3ombre);overflow:hidden}
.mail4.mb>.mlect2{overflow:auto}   /* 08/10 : la carte de lecture DÉFILE (réponses prêtes, « Classé … », « Caler un rendez-vous », fin des lettres) : le « overflow:hidden » de la règle groupée ci-dessus l'emportait sur celui du hub (.m3lecture{overflow:auto}) et rognait tout ce qui dépassait la carte ; les coins arrondis la rognent déjà */
.mail4.mb>.mbbar{overflow:visible;height:60px;padding:0 12px 0 8px}   /* l'aide de la recherche (« Affiner ») descend sous le bandeau */
.mail4.mb>.mliste2{background:color-mix(in srgb,var(--v3lave) 60%,var(--surface))}

/* ── le bandeau : onglets · Dossiers · recherche · Nouveau mail ── */
.mail4.mb .mbtabs{align-items:center}
.mail4.mb .mbt{height:40px;align-self:center;border-radius:11px}
.mail4.mb .mbt.on{background:var(--v3p);color:#fff;font-weight:650}
.mail4.mb .mbt.on::after{display:none}
.mail4.mb .mbt.on b{background:#fff;color:var(--v3p)}
.mail4.mb .mbt:not(.on):hover{background:var(--v3lave);color:var(--ink)}
.mail4.mb>.mbbar>.mbdos{align-self:center;height:40px;border-radius:11px}
.mail4.mb .mbnew{background:var(--v3p)}
.mail4.mb .mbnew:hover{background:var(--v3p2)}
.mail4.mb>.mbbar>.mbrslot{flex:1 1 150px;min-width:150px;max-width:440px;margin-left:auto;position:relative;z-index:6}
.mail4.mb .mbtabs .mbt:focus-visible{outline-offset:-2px}   /* la bande d'onglets défile : un contour à l'extérieur serait rogné (haut et bas de la bande) */
.mail4.mb>.mbbar>.mbtabs{flex-shrink:0}   /* la place manque : c'est la recherche qui rétrécit (jusqu'à son minimum), jamais la bande d'onglets */
.mail4.mb .mbrslot .mrech{margin:0!important;width:100%}
.mail4.mb .mbrslot .mrech input{background:var(--v3lave)}
/* l'aide « Affiner » : à largeur de la recherche si elle est large, sinon 264 px au moins, ancrée à droite (elle s'ouvre vers la gauche, sur
   le bandeau) et jamais plus large que l'écran ; ses lignes passent à la ligne plutôt que de déborder du cadre */
.mail4.mb .mbrslot .maide{left:auto;right:0;width:max(100%,264px);max-width:calc(100vw - 24px);box-sizing:border-box}
.mail4.mb .mbrslot .maide button{flex-wrap:wrap;gap:2px 10px;min-width:0}
@media(max-width:760px){ .mail4.mb .mbrslot .maide{left:0;right:auto;width:min(264px,calc(100vw - 100px))} }   /* deuxième rangée : la recherche est à gauche, l'aide s'ouvre vers la droite */
/* « Effacer la recherche » reste visible : il n'est pas dans la recherche déplacée mais dans l'en-tête de la liste, et la croix native du
   champ ne rend pas la liste en mode Messages (le hub ne cherche qu'à la validation) — seuls Échap et ce lien le font */
.mail4.mb .mltete>.mrechx{margin:0;flex:1 0 100%;text-align:left}   /* un bouton centre son texte : le lien s'aligne sur le titre et les filtres */
/* la recherche a sa place dans le bandeau : elle part de 150 px et ne grandit que dans la place libre (elle ne prend rien
   aux onglets). Paliers mesurés sur la BARRE (requête de conteneur, boîte de contenu) — jamais un onglet masqué ni coupé :
   ≤ 1 440 px  Assistant et Favoris en icône seule ;
   ≤ 1 310 px  les onglets inactifs aussi (nom au survol, compteurs gardés ; l'onglet actif garde son nom) ;
   ≤ 1 080 px  « Dossiers » et « Nouveau mail » en icône seule ;
   ≤ 860 px    onglets resserrés, recherche à 120 px au moins ;
   fenêtre ≤ 760 px (téléphone, tablette en hauteur) : deux rangées — les onglets ; Dossiers · recherche · Nouveau ;
   fenêtre ≤ 480 px : seul l'onglet actif garde son compteur (les autres : leur icône, le nombre reste dans le nom accessible).
   Marge mesurée au balayage (outils : « compteurs extrêmes », 12 345 / 128 / 99 / 123) : aucun onglet coupé de 380 à 1 930 px. */
@container (max-width:1500px){ .mail4.mb .mbtabs .mbt{padding:0 13px;gap:8px} }   /* marge : un compteur de plus ne coupe pas « Envoyés » */
@container (max-width:1440px){ .mail4.mb>.mbbar>.mbfa span{display:none} .mail4.mb>.mbbar>.mbfa{padding:0 9px} }
@container (max-width:1310px){ .mail4.mb .mbtabs .mbt:not(.on) span{display:none} .mail4.mb .mbtabs .mbt{padding:0 11px;gap:7px} }
@container (max-width:1080px){ .mail4.mb>.mbbar>.mbdos span,.mail4.mb>.mbbar>.mbnew span{display:none}
  .mail4.mb>.mbbar>.mbdos{padding:0 10px;gap:6px}
  .mail4.mb>.mbbar>.mbnew{width:42px;padding:0;justify-content:center} }
@container (max-width:860px){ .mail4.mb .mbtabs{gap:0} .mail4.mb .mbtabs .mbt{padding:0 6px;gap:4px} .mail4.mb>.mbbar>.mbrslot{min-width:120px} }
@media(max-width:760px){
  .mail4.mb>.mbbar{flex-wrap:wrap;height:auto;gap:0 4px;padding:4px 8px 6px 6px}
  .mail4.mb>.mbbar>.mbtabs{flex:1 0 100%;height:46px}
  .mail4.mb>.mbbar>.mbrslot{flex:1 1 120px;min-width:0;max-width:none;margin:0}
}

/* ── la liste : plus de titre en double ; la bascule Messages | Personnes, les filtres, puis « N messages · À jour » ──
   ⚠️ Les filtres (.mfilt) et la liste (.mrows) sont des FRÈRES de l'en-tête (.mltete), pas ses enfants : la ligne d'état,
   posée par mb.js entre les filtres et la liste, vient APRÈS les filtres (spec §3). La bascule garde sa propre ligne
   en tête : à 418 px (liste de 1 440 px) elle ne tient pas à côté des filtres, de la densité et de la case « tout sélectionner ». */
.mail4.mb .mltete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px 8px!important}
.mail4.mb .mltete>h1{display:contents}
.mail4.mb .mltete>h1>.mtit,.mail4.mb .mltete>h1>.mburger{display:none!important}
.mail4.mb .mltete>h1>.mbasc{flex:none;margin:0}
/* une recherche, une période : « Résultats · 12 dans Réception » reste dit — c'est le seul endroit qui compte les résultats (mb.js pose .mbres) */
.mail4.mb .mltete.mbres>h1>.mtit{display:flex!important;align-items:baseline;gap:6px;flex:1 1 140px;min-width:0}
.mail4.mb .mltete.mbres>h1>.mtit>b{font-size:15px;white-space:nowrap}
.mail4.mb .mliste2>.mbsyncz{flex:none;margin:0;padding:8px 18px 4px}
.mail4.mb .mfilt button.on,.mail4.mb .mgenstete button.on{background:var(--v3p);color:#fff}
.mail4.mb .mfilt em,.mail4.mb .mbsync,.mail4.mb .mbcompte,.mail4.mb .mltete.mbres .mtit>span{font-variant-numeric:tabular-nums}   /* les chiffres ne dansent pas quand ils changent */
.mail4.mb .mrow2.on,.mail4.mb .mrow2.nl.on{background:var(--v3teinte)!important;box-shadow:inset 4px 0 0 var(--v3pt)!important}
.mail4.mb .mrow2.nl .pt{background:var(--v3pt)!important}
.mail4.mb .mjour{color:var(--v3pt)!important}
/* l'en-tête de jour collant est opaque (les lignes passent dessous) : à la teinte de la carte de liste, pas en blanc franc */
html body .mail4.mb .mjour{background:color-mix(in srgb,var(--v3lave) 60%,var(--surface))!important}

/* ── téléphone : la boîte bord à bord ── */
@media(max-width:480px){
  html body .mail4.mb{padding:6px;gap:6px;border-radius:0}
  .mail4.mb>.mbbar>.mbdos span{display:none}
  .mail4.mb .mbrslot .mrech>kbd{display:none}
  .mail4.mb .mbtabs .mbt:not(.on) b{display:none}   /* cinq onglets + des compteurs à 3 chiffres ne tiennent pas dans 360 px : le nombre reste dans le nom accessible */
}

/* ═══ 07/10 · MAIL v3 — la lecture, le navigateur de dossiers, la rédaction (D-32) ════════════════════════════════════
   Lecture : toute la carte (« ça doit prendre toute la place »), barre d'actions collée et libellée selon SA place
   (conteneur barrelect, 06-mail.css), bandeau de la personne lavé à la couleur de son enseigne, objet en Bricolage.
   Navigateur : la liste masquée derrière, favoris en tuiles (filet de couleur), arbre des dossiers. Aucun transform. */
html body .mail4.mb .m3read .mdoc .in,html body .mail4.mb .m3read .mdoc .in:has(iframe.mhtml){max-width:none}
html body .mail4.mb .m3read .mcorps:not(.mhtml){max-width:78ch}
html body .mail4.mb .m3read>.moutils{background:var(--surface);box-shadow:0 1px 0 var(--v3ligne)}
.mail4.mb .moutils .pri{background:var(--v3p);color:#fff}
.mail4.mb .moutils .pri:hover{background:var(--v3p2);color:#fff}
@container barrelect (min-width:876px){
  .mail4.mb .moutils [data-rdtransf] span,.mail4.mb .moutils [data-mact="archiver"] span,.mail4.mb .moutils .mbranger span{display:inline}
  .mail4.mb .moutils [data-rdtransf],.mail4.mb .moutils [data-mact="archiver"]{padding:0 10px}
}
@container barrelect (min-width:1055px) and (max-width:1660px){
  .mail4.mb .moutils button:not(.pri):not(.mbtri):not([data-rdtransf]):not([data-mact="archiver"]):not(.mbranger) span,.mail4.mb .moutils label span{display:none}
  .mail4.mb .moutils button:not(.pri):not(.mbtri):not([data-rdtransf]):not([data-mact="archiver"]):not(.mbranger){padding:0 8px}
}
.mail4.mb .moutils .mbtri{display:none;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--v3pt);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s}
.mail4.mb .moutils .mbtri span{display:inline}
.mail4.mb .moutils .mbtri:hover{background:var(--v3lave)}
@container barrelect (min-width:1096px){ .mail4.mb .moutils .mbtri{display:inline-flex} }
@container barrelect (max-width:690px){ .mail4.mb .moutils .pos,.mail4.mb .moutils .mbranger kbd{display:none} }
.mail4.mb .m3read>.mbband,#modalBox>.mailread>.mbband{--hdc:var(--v3p);background:linear-gradient(100deg,color-mix(in srgb,var(--hdc) 11%,var(--surface)),color-mix(in srgb,var(--hdc) 3%,var(--surface)));border-radius:16px;padding:18px 20px!important}
.mail4.mb .m3read>.mbband{margin-top:14px}
.mail4.mb .m3read>.mbband:has(.mbpill.lf),#modalBox>.mailread>.mbband:has(.mbpill.lf),.mbband:has(.mbpill.lf){--hdc:#e41d5d}
.mail4.mb .m3read>.mbband:has(.mbpill.lmd),#modalBox>.mailread>.mbband:has(.mbpill.lmd),.mbband:has(.mbpill.lmd){--hdc:#e8722a}
.mail4.mb .m3read>.mbband:has(.mbpill.natimmo),#modalBox>.mailread>.mbband:has(.mbpill.natimmo),.mbband:has(.mbpill.natimmo){--hdc:#1da8a6}
.mail4.mb .m3read>.mbband:has(.mbpill.osmoz),#modalBox>.mailread>.mbband:has(.mbpill.osmoz),.mbband:has(.mbpill.osmoz){--hdc:#1f2328}
.mail4.mb .m3read>.mbband:has(.mbpill.icom),#modalBox>.mailread>.mbband:has(.mbpill.icom),.mbband:has(.mbpill.icom){--hdc:#0ea5e9}
html body .mail4.mb .m3read .mdoc h2{font-family:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
html body .mail4.mb .m3read .mpretes button{background:var(--v3lave);border:1px solid var(--v3ligne);color:var(--v3pt)}
html body .mail4.mb .m3read .mpretes button:hover{background:var(--v3teinte)}

/* ── le navigateur de dossiers (colonne de gauche) ── */
.mail4.mb>.mliste2.mbnavon>:not(.mbnav){display:none!important}
.mail4.mb .mbnav{display:flex;flex-direction:column;min-height:0;height:100%}
.mail4.mb .mbnavh{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.mail4.mb .mbnavh b{flex:1;min-width:0;font:700 20px/1.2 "Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.mail4.mb .mbnavx{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.mail4.mb .mbnavx:hover{background:var(--v3lave);color:var(--ink)}
.mail4.mb .mbnav .mbq{margin:6px 16px 4px}
.mail4.mb .mbnav .mbdlist{flex:1;min-height:0;max-height:none;overflow:auto;padding:4px 10px 16px}
.mail4.mb .mbnav .mbsec{color:var(--v3pt);letter-spacing:.16em;font-size:10.5px;font-weight:700;text-transform:uppercase;padding:14px 8px 8px}
.mail4.mb .mbtuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 0 4px}
.mail4.mb .mbtuile{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:11px 12px 10px 16px;border:0;border-radius:14px;background:var(--surface);box-shadow:0 1px 2px rgba(14,40,38,.06);text-align:left;font:inherit;color:var(--ink2);cursor:pointer;transition:background-color .15s,box-shadow .15s}
.mail4.mb .mbtuile::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--fc)}
.mail4.mb .mbtuile:hover{background:var(--v3lave);box-shadow:0 0 0 1px var(--v3ligne)}
.mail4.mb .mbtuile.on{background:var(--v3teinte)}
.mail4.mb .mbtuile .t1{display:flex;align-items:center;gap:8px;min-width:0}
.mail4.mb .mbtuile b{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail4.mb .mbtuile em{flex:none;display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--v3p);color:#fff;font-style:normal;font-size:11px;font-weight:650}
.mail4.mb .mbtuile>span:last-child{font-size:12px;color:var(--muted)}
.mail4.mb .mbnav .mbdl.on{background:var(--v3teinte);box-shadow:inset 3px 0 0 var(--v3pt)}
.mail4.mb .mbnav .mbpf{border-top:1px solid var(--v3ligne);padding:10px 14px}

/* ── la rédaction : même famille de couleurs (la fenêtre choisie le 24/09 ne change pas) ── */
body.mb-on .rdenv,body.mb-on .cta.rdenv{background:var(--v3p);border-color:var(--v3p)}
body.mb-on .rdenv:hover,body.mb-on .cta.rdenv:hover{background:var(--v3p2);border-color:var(--v3p2)}

/* ═══ 13/10/2026 (audit de nuit) · le bandeau de la personne : sa ligne d'infos, et la fenêtre de lecture d'un téléphone ═══════════════════
   À 390 px, le nom (« Lettre du rés… ») et sa ligne (« pas de fiche : ce n’est pas une per… ») étaient mangés par les
   points de suspension, à côté de la pastille. Sur un écran étroit ils passent à la ligne : on lit qui écrit. */
/* La ligne d'infos (ville · adresse · N mails) qui passe à la ligne commençait la seconde par « · ». Chaque info porte son
   point, et la ligne est décalée de sa largeur, ce décalage rogné (clip-path) : le point d'une info en début de ligne tombe hors champ. */
.mbband .mbmeta{margin-left:-22px;clip-path:inset(-4px -4px -4px 22px)}
.mbband .mbmeta span::before,.mbband .mbmeta span+span::before{content:"·";display:inline-block;width:22px;margin:0;text-align:center;color:var(--faint)}
@media(max-width:560px){
  #modalBox>.mailread>.mbband .mbnom{flex-wrap:wrap;gap:4px 8px}
  #modalBox>.mailread>.mbband .mbnom b{white-space:normal;overflow-wrap:anywhere;font-size:17px;line-height:1.3}
  #modalBox>.mailread>.mbband .mbmeta{flex-direction:column}
  #modalBox>.mailread>.mbband .mbmeta span{white-space:normal;overflow-wrap:anywhere}
  #modalBox>.mailread>.mbband .mbmeta{margin-left:0;clip-path:none}
  #modalBox>.mailread>.mbband .mbmeta span::before,#modalBox>.mailread>.mbband .mbmeta span+span::before{content:none}   /* une info par ligne : pas de « · » */
}

/* ═══ 27/10 · LA BOÎTE EN ÉQUIPE (mb.js, section 12) : « répond… » et « Traité » sur la ligne, « Evelyne répond à ce mail » dans
   le bandeau, « N sans réponse depuis plus de 24 h » en tête de la Réception. Rien ne bouge au survol (couleur seulement). ═══ */
.mail4.mb .mrow2 .de small.mbsv>.mbsvrep{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border-radius:99px;white-space:nowrap;font-weight:650;
  background:color-mix(in srgb,#e8722a 15%,var(--surface));color:color-mix(in srgb,#b4531a 72%,var(--ink))}
.mbsv>.mbsvrep svg{width:10px;height:10px;flex:none}
.mbsv>i.mbsvok{display:inline-grid;place-items:center;width:15px;height:15px;background:color-mix(in srgb,var(--c) 20%,var(--surface));color:color-mix(in srgb,var(--c) 80%,var(--ink))}
.mbsv>i.mbsvok svg{width:10px;height:10px}
.mbeqrep{flex:1 0 100%;display:flex;align-items:center;gap:8px;min-width:0;padding:7px 12px;border-radius:10px;font-size:13px;line-height:1.35;color:var(--ink2);
  background:color-mix(in srgb,#e8722a 12%,var(--surface));border:1px solid color-mix(in srgb,#e8722a 30%,var(--line))}
.mbeqrep>svg{width:15px;height:15px;flex:none;color:color-mix(in srgb,#d4651f 80%,var(--ink))}
.mbeqrep>span{min-width:0;overflow-wrap:anywhere}
.mbeqrep b{font-weight:650;color:var(--ink)}
.mbband .mbeqrep{padding:6px 11px;font-size:12.5px}
.mail4.mb .mliste2>.mbretz{flex:none;margin:0;padding:2px 18px 8px}
html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo .mliste2>.mbretz{padding:0 var(--mol-pad) 10px!important}
@media(min-width:1101px){
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:not(:has(.m3read .mdoc)) .mliste2>.mbretz{padding-left:34px!important;padding-right:40px!important}
  html body.mo-on.mo-on.mo-on .mail4.mb.mo.mo.mo:has(.m3read .mdoc) .mliste2>.mbretz{padding-left:20px!important;padding-right:20px!important}
}
.mbret{display:flex;align-items:center;gap:8px;width:100%;min-width:0;max-width:520px;height:32px;min-height:0;margin:0;padding:0 11px;border-radius:9px;box-shadow:none;
  border:1px solid color-mix(in srgb,#cf3f3f 26%,var(--line2));background:color-mix(in srgb,#cf3f3f 6%,var(--surface));color:var(--ink2);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.mbret:hover{background:color-mix(in srgb,#cf3f3f 11%,var(--surface))}
.mbret>svg{width:14px;height:14px;flex:none;color:color-mix(in srgb,#c2410c 85%,var(--ink))}
.mbret>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbret b{font-weight:700;color:var(--ink)}
.mbret em{flex:none;font-style:normal;font-weight:650;color:var(--accent-strong,var(--accent))}
.mbret.on{background:color-mix(in srgb,#cf3f3f 13%,var(--surface));border-color:color-mix(in srgb,#cf3f3f 45%,var(--line2))}