/* ══ L'ÉDITEUR RICHE, ET L'ONGLET « MODÈLES » (29 septembre 2026) ═════════════
   Préfixes `rc-ed-` (l'éditeur, `_editeur.html` / `_editeur.js`) et `mdl-`
   (l'onglet Modèles, maquette 3). Chargée par les écrans qui s'en servent,
   après `charte.css` et `crm.css` : elle n'utilise que leurs jetons.

   ⚠️ Sous le doigt : zone à 16 px (sinon le téléphone zoome), boutons de 44 px,
   et la barre d'outils glisse dans elle-même, jamais la page. */

/* ── L'éditeur ── */
.rc-ed { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); background: var(--background); overflow: hidden; }
.rc-ed:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-ed-barre { display: flex; align-items: center; gap: 2px; padding: 5px 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); background: var(--card); }
.rc-ed-barre button { min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--muted-foreground); font: inherit; font-size: var(--text-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.rc-ed-barre button:hover { background: var(--muted); color: var(--foreground); }
.rc-ed-barre button.rc-ed-actif { background: var(--muted); color: var(--foreground); }
.rc-ed-barre button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rc-ed-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }
.rc-ed-droite { margin-left: auto; }
.rc-ed-zone, .rc-ed-source { min-height: 180px; max-height: 60vh; overflow: auto; padding: 14px 16px;
  font-size: var(--text-base); line-height: 1.6; color: var(--foreground); outline: none; }
.rc-ed-source { width: 100%; border: 0; resize: vertical; background: var(--background);
  font-family: var(--font-code); font-size: var(--text-sm); }
.rc-ed-zone > :first-child { margin-top: 0; }
.rc-ed-zone p { margin: 0 0 8px; }
.rc-ed-zone h1, .rc-ed-zone h2, .rc-ed-zone h3 { margin: 12px 0 6px; line-height: 1.3; font-weight: 600; }
.rc-ed-zone h1 { font-size: var(--text-xl); }
.rc-ed-zone h2 { font-size: var(--text-lg); }
.rc-ed-zone h3 { font-size: var(--text-md); }
.rc-ed-zone ul, .rc-ed-zone ol { margin: 0 0 8px; padding-left: 22px; }
.rc-ed-zone blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--border-strong);
  color: var(--muted-foreground); }
.rc-ed-zone a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rc-ed-zone hr { border: 0; border-top: 1px solid var(--border-strong); margin: 12px 0; }
.rc-ed-zone ul[data-cases] { list-style: none; padding-left: 4px; }
.rc-ed-zone ul[data-cases] > li { position: relative; padding-left: 26px; cursor: text; }
.rc-ed-zone ul[data-cases] > li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px;
  border: 1.5px solid var(--muted-foreground); border-radius: 4px; cursor: pointer; }
.rc-ed-zone ul[data-cases] > li[data-coche="1"]::before { background: var(--success); border-color: var(--success);
  box-shadow: inset 0 0 0 2px var(--background); }
.rc-ed-zone ul[data-cases] > li[data-coche="1"] { color: var(--muted-foreground); text-decoration: line-through; }
.rc-ed-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--border); background: var(--card); }
.rc-ed-pied-titre { font-size: var(--text-xs); color: var(--muted-foreground); margin-right: 4px; }
.rc-ed-var { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent-ring-strong); background: var(--accent-ring); color: var(--accent-hi);
  font: inherit; font-size: var(--text-xs); cursor: pointer; }
.rc-ed-var:hover { border-color: var(--accent); }

/* ── La page « Messages types » : la liste à gauche, le message à droite ──
   Refondue le 4 octobre 2026 : une recherche, trois menus, la liste rangée
   par campagne ; au téléphone, une chose à la fois (`.mdl--fiche`). */
@media (min-width: 901px) { .cpt-corps:has(.mdl) { grid-template-columns: 220px minmax(0, 1080px); } }
.mdl { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.mdl-liste { gap: 0; padding: 0; position: sticky; top: 16px; max-height: calc(var(--fenetre, 100vh) - 120px); overflow: hidden; }
.mdl-liste-tete { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border); }
.mdl-cherche { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 12px; border-radius: var(--radius-md);
  background: var(--muted); border: 1px solid var(--border-strong); color: var(--muted-foreground); }
.mdl-cherche:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-ring); }
.mdl-cherche input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--foreground);
  font: inherit; font-size: var(--text-base); }
.mdl-cherche kbd { font: inherit; font-size: var(--text-2xs); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); }
.mdl-cherche:focus-within kbd { display: none; }
.mdl-menus { display: flex; flex-wrap: wrap; gap: 6px; }
.mdl-menus select { flex: 1 1 120px; min-width: 0; height: 32px; padding-top: 0; padding-bottom: 0; font-size: var(--text-sm); }
.mdl-menus [data-mdl-filtre=campagne] { flex-basis: 100%; }
.mdl-menus select.mdl-menu--actif { border-color: var(--accent); color: var(--accent-hi); }
.mdl-items { overflow-x: hidden; overflow-y: auto; padding: 4px 8px 12px; overscroll-behavior: contain; }
.mdl-groupe { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 8px 0 2px;
  padding: 4px 6px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; }
.mdl-groupe:hover { color: var(--foreground); }
.mdl-groupe > span:first-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-groupe > span:last-child { letter-spacing: 0; font-weight: 500; }
.mdl-groupe svg { display: inline-block; vertical-align: -1px; margin-right: 4px; transform: rotate(90deg); transition: transform var(--motion-fast); flex-shrink: 0; }
.mdl-bloc[hidden] { display: none; }
.mdl-bloc--replie .mdl-groupe svg { transform: none; }
.mdl-bloc--replie .mdl-bloc-items { display: none; }
.mdl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 10px;
  border-radius: var(--radius-md); border: 1px solid transparent; color: var(--foreground); text-decoration: none; }
.mdl-item[hidden] { display: none; }
.mdl-item:hover { background: var(--muted); }
.mdl-item[aria-current] { background: var(--muted); border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--accent); }
.mdl-item-nom { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-item-extrait { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-item-pastilles, [data-mdl-resume] { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; }
[data-mdl-resume] { flex-wrap: wrap; }
.mdl-item-pastilles { max-width: 130px; overflow: hidden; }
.mdl-pt { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); white-space: nowrap;
  font-size: var(--text-2xs); color: var(--muted-foreground); background: var(--background); border: 1px solid var(--border-strong); }
[data-mdl-resume] .mdl-pt { height: 24px; padding: 0 8px; font-size: var(--text-xs); }
.mdl-pt--langue { color: var(--info); border-color: rgba(125, 211, 252, .35); }
.mdl-item mark { background: var(--accent-ring-strong); color: inherit; border-radius: 2px; }
.mdl-vide { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; padding: 14px 10px; }
.mdl-vide[hidden] { display: none; }
.mdl-vide a { color: var(--accent); }

.mdl-fiche { gap: 14px; }
.mdl-form { display: flex; flex-direction: column; gap: 14px; }
.mdl-retour { display: none; }
.mdl-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mdl-nom { flex: 1 1 380px; min-width: 0; padding: 4px 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0;
  background: none; color: var(--foreground); font: inherit; font-size: var(--text-lg); font-weight: 600; outline: 0; }
.mdl-nom:hover, .mdl-nom:focus { border-bottom-color: var(--border-strong); }
.mdl-gestes { display: flex; gap: 6px; flex-wrap: wrap; }
.mdl-gestes .btn { display: inline-flex; align-items: center; gap: 6px; }
.mdl-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mdl-lien { border: 0; background: none; padding: 0 4px; color: var(--accent); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.mdl-lien:hover { text-decoration: underline; }
.mdl-reglages { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: var(--radius-md);
  background: var(--background); border: 1px solid var(--border); }
.mdl-reglages[hidden], .mdl-champs[hidden], .mdl-champ[hidden] { display: none; }
.mdl-reglages-ligne { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.mdl-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mdl-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mdl-champ > span, .mdl-legende { font-size: var(--text-xs); color: var(--muted-foreground); }
.mdl-canaux { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.mdl-canal { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--muted-foreground);
  font-size: var(--text-sm); cursor: pointer; }
.mdl-canal input { position: absolute; opacity: 0; pointer-events: none; }
.mdl-canal:has(input:checked) { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-ring); }
.mdl-canal:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.mdl-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mdl-form .mdl-pied { padding-top: 14px; border-top: 1px solid var(--border); }
.mdl-pied-gestes { display: flex; gap: 8px; flex-wrap: wrap; }
.mdl-lecture { padding: 12px 14px; border-radius: var(--radius-md); background: var(--muted);
  font-size: var(--text-sm); color: var(--muted-foreground); }
.mdl-apercu { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 12px 14px; }

/* ── Le choix d'un modèle en écrivant ── */
.rc-choix-modele { position: relative; }
.rc-choix-modele-liste { position: absolute; z-index: var(--z-dropdown); right: 0; top: calc(100% + 4px);
  width: min(340px, 86vw); max-height: 320px; overflow: auto; padding: 6px; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.rc-choix-modele-liste[hidden] { display: none; }
.rc-choix-modele-liste button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--foreground);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.rc-choix-modele-liste button small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-choix-modele-liste button:hover, .rc-choix-modele-liste button:focus-visible { background: var(--muted); outline: none; }
.rc-choix-modele-liste p { margin: 6px 10px; font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
.rc-choix-modele-liste p a { color: var(--accent); }

@media (max-width: 900px) {
  /* Au téléphone, une chose à la fois : la liste, ou le message ouvert. */
  .mdl { grid-template-columns: 1fr; }
  .mdl-liste { position: static; max-height: none; overflow: visible; }
  .mdl-items { overflow: visible; }
  .mdl:not(.mdl--fiche) .mdl-fiche, .mdl--fiche .mdl-liste { display: none; }
  .mdl-retour { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: none; }
  .mdl-cherche { height: 48px; }
  .mdl-cherche input { height: 46px; font-size: 16px; }
  .mdl-groupe, .mdl-lien, .mdl-nom, .mdl-nouveau, .mdl-canal { min-height: 44px; }
  .btn.btn-sm.mdl-nouveau { display: inline-flex; align-items: center; height: 44px; min-height: 44px; }
  .mdl-menus select { height: 44px; font-size: 16px; }
  .mdl-item { padding: 12px 10px; }
  .mdl-tete { flex-direction: column; align-items: stretch; }
  .mdl-nom { flex: none; }
  .mdl-gestes .btn { flex: 1; justify-content: center; min-height: 44px; }
  .mdl-champs { grid-template-columns: 1fr; }
  .rc-ed-barre { flex-wrap: nowrap; overflow-x: auto; }
  .rc-ed-barre button { min-width: 44px; height: 44px; }
  .rc-ed-zone, .rc-ed-source { font-size: 16px; }
  .rc-ed-var { height: 32px; }
}
fieldset.mdl-champ { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.mdl-champ > legend { padding: 0; margin-bottom: 5px; }
.rc-ed-zone img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.rc-ed-zone img:hover { outline: 2px solid var(--accent-ring-strong); }

/* ── L'onglet « Adresses mail » (maquette 2) ── */
.ml-adresse { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.ml-adresse:first-of-type { border-top: 0; }
.ml-g { width: 34px; height: 34px; flex: none; border-radius: 8px; background: #fff; color: #4285F4; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.ml-adresse-corps { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-adresse-corps b { font-weight: 500; overflow-wrap: anywhere; }
.ml-adresse-corps small { color: var(--muted-foreground); font-size: var(--text-xs); }
.ml-erreur { color: var(--warning-text); }
/* Les adresses d'envoi d'une boîte (4 octobre 2026, maquette validée). */
.ml-envois { margin: 0 0 14px 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg);
             display: flex; flex-direction: column; gap: 10px; }
.ml-envois-tete { display: flex; flex-direction: column; gap: 2px; }
.ml-envois-tete b { font-weight: 500; font-size: var(--text-sm); }
.ml-envois-tete small, .ml-envoi-aide { color: var(--muted-foreground); font-size: var(--text-xs); }
.ml-envois-liste { display: flex; flex-direction: column; }
.ml-envoi { display: grid; grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 10px;
            align-items: center; margin: 0; padding: 8px 0; border-top: 1px solid var(--border); }
.ml-envoi:first-child { border-top: 0; }
.ml-envoi--off .ml-envoi-adresse span { color: var(--muted-foreground); }
.ml-envoi-adresse { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-envoi-adresse span { overflow-wrap: anywhere; }
.ml-pastille { align-self: flex-start; font-size: var(--text-2xs); padding: 1px 7px; border-radius: 6px;
               background: var(--muted); color: var(--muted-foreground); }
.ml-pastille--ok { color: var(--success-text, #7fd1a4); }
.ml-pastille--attente { color: var(--warning-text); }
.ml-envoi-aide { grid-column: 2 / -1; margin: 0; }
.ml-envoi-ajout { display: flex; gap: 8px; margin: 0; }
.ml-envoi-ajout input { max-width: 320px; }
.ml-adresse-sig label { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted-foreground); }
.ml-adresse-sig select { width: auto; min-width: 150px; }
.ml-adresse-gestes { display: flex; flex-wrap: wrap; gap: 4px; }
.ml-adresse-gestes form { margin: 0; }
.ml-signatures { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-sig { display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--muted); color: var(--foreground); text-decoration: none;
  font-size: var(--text-sm); }
.ml-sig small { color: var(--muted-foreground); font-size: var(--text-2xs); }
.ml-sig[aria-current] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ml-sig-forme { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ml-sig-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 14px; align-items: start; }
.ml-apercu { min-height: 120px; padding: 14px 16px; border-radius: var(--radius-md); background: #fff; color: #222;
  font: 13px/1.45 Arial, Helvetica, sans-serif; overflow: auto; }
.ml-apercu img { max-width: 100%; height: auto; }
.ml-apercu a { color: var(--mmb-rouge-fonce); }
@media (max-width: 900px) { .ml-sig-deux { grid-template-columns: 1fr; } }
/* Une signature s'écrit sur fond blanc : ses couleurs sont celles d'un mail reçu. */
.rc-ed[data-editeur-permissif] .rc-ed-zone { background: #fff; color: #222; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.rc-ed[data-editeur-permissif] .rc-ed-zone a { color: var(--mmb-rouge-fonce); }

/* ── L'éditeur de mail (maquette 1) : grand, le mail à gauche, les modèles à droite ── */
dialog.rc-mail { width: min(1100px, calc(100vw - 32px)); padding: 0; display: flex; flex-direction: column; }
dialog.rc-mail:not([open]) { display: none; }
.rc-mail-tete { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.rc-mail-tete h2 { margin: 0; font-size: var(--text-md); font-weight: 500; flex: 1; }
.rc-mail-sur { font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--muted-foreground); font-weight: 600; margin-right: 6px; }
.rc-mail-corps { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; }
.rc-mail-principal { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; min-width: 0; }
.rc-mail-entete { display: flex; flex-direction: column; }
.rc-mail-ligne { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding: 4px 0; }
.rc-mail-ligne > span, .rc-mail-ligne > label { width: 48px; flex: none; font-size: var(--text-sm); color: var(--muted-foreground); }
/* ⚠️ `background-color`, jamais `background` : le raccourci remettait la flèche
   du « De » en mosaïque au premier clic (4 octobre 2026, cf. crm.css). */
.rc-mail-ligne .rc-saisie { border-color: transparent; background-color: transparent; padding-left: 0; }
.rc-mail-ligne .rc-saisie:focus { box-shadow: none; border-color: transparent; }
.rc-mail-ligne select.rc-saisie { width: auto; max-width: 100%; }
.rc-mail-signature { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rc-mail-sig-apercu { flex: 1 1 260px; min-height: 0; padding: 10px 12px; }
.rc-mail-sig-choix { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted-foreground); margin-left: auto; }
.rc-mail-sig-choix select { width: auto; min-width: 160px; }
.rc-mail-pieces { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rc-mail-pieces-liste { display: contents; list-style: none; }
.rc-mail-piece { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--muted); font-size: var(--text-sm); }
.rc-mail-piece a { color: var(--foreground); text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-mail-piece small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-mail-piece button { border: 0; background: none; color: var(--muted-foreground); cursor: pointer; font-size: 15px; padding: 0 4px; }
.rc-mail-erreur { margin: 0; }
.rc-mail-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
.rc-mail-pied-aide { margin-left: auto; max-width: 360px; text-align: right; }
.rc-mail-cote { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 60%, var(--card)); min-width: 0; }
.rc-mail-modeles { display: flex; flex-direction: column; gap: 6px; overflow: auto; max-height: 360px; }
.rc-mail-groupe { margin: 6px 0 0; font-size: var(--text-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); }
.rc-mail-modele { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.rc-mail-modele small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-mail-modele:hover { border-color: var(--accent-ring-strong); }
.rc-mail-variables { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.rc-mail-variables > div { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-choix-modele-groupe { margin: 6px 10px 2px !important; font-size: var(--text-2xs) !important; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 900px) {
  .rc-mail-corps { grid-template-columns: 1fr; }
  .rc-mail-cote { border-left: 0; border-top: 1px solid var(--border); }
  .rc-mail-pied .btn { min-height: 44px; }
  .rc-mail-pied-aide { margin-left: 0; text-align: left; }
}
@media (min-width: 901px) { .cpt-corps:has(.ml-sig-forme) { grid-template-columns: 220px minmax(0, 1000px); } }

/* ── Lire un mail retrouvé (maquette 4) ── */
dialog.rc-lecteur { width: min(860px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; }
dialog.rc-lecteur:not([open]) { display: none; }
.rc-lecteur-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rc-lecteur-tete h2 { margin: 0; font-size: var(--text-lg); font-weight: 500; }
.rc-lecteur-tete p { margin: 2px 0 0; }
.rc-lecteur-corps { width: 100%; height: min(60vh, 560px); border: 0; border-radius: var(--radius-md); background: #fff; }
.rc-lecteur-pieces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rc-lecteur-pieces a { display: inline-flex; padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--muted); color: var(--foreground); font-size: var(--text-sm); text-decoration: none; }
@media (max-width: 900px) {
  .ml-adresse-sig, .ml-adresse-sig label { width: 100%; }
  .ml-adresse-sig select { flex: 1; min-width: 0; }
  .ml-envois { margin-left: 0; }
  .ml-envoi { grid-template-columns: 24px minmax(0, 1fr) 32px; }
  .ml-envoi-nom, .ml-envoi-sig { grid-column: 2 / 3; }
  .rc-mail-sig-choix { margin-left: 0; width: 100%; }
  .rc-mail-sig-choix select { flex: 1; min-width: 0; }
}

/* ══ L'ÉDITEUR D'UNE NOTE (30 septembre, simplifié le 2 octobre 2026) ══════════
   `editeur_note` (`_editeur.html`) : au repos, un simple champ ; en écrivant,
   une barre courte paraît SOUS le texte (« + » ouvre tout le reste, comme
   « / »). Rien d'autre à lire : ni légende, ni mode d'emploi. */
.rc-ed--note .rc-ed-zone { min-height: 52px; padding: 12px 14px; }
/* ⚠️ Écrite, la note GARDE sa barre et sa hauteur hors du focus : sans cela,
   cliquer « Ajouter la note » faisait perdre le focus, la barre disparaissait,
   le bouton remontait sous le doigt et le clic tombait à côté (2 octobre 2026). */
.rc-ed--note:focus-within .rc-ed-zone, .rc-ed--note:not(.rc-ed--vide) .rc-ed-zone { min-height: 110px; }
.rc-ed--note .rc-ed-barre { display: none; gap: 2px; padding: 4px 6px; border-bottom: 0; border-top: 1px solid var(--border); }
.rc-ed--note:focus-within .rc-ed-barre, .rc-ed--note:not(.rc-ed--vide) .rc-ed-barre, .rc-ed--grand .rc-ed-barre { display: flex; }
.rc-ed--note .rc-ed-barre button { min-width: 32px; height: 32px; padding: 0 7px; font-size: var(--text-base); }
.rc-ed--note .rc-ed-lettre { font-family: var(--font-sans); font-size: 15px; font-weight: 500; }
.rc-ed-plus { color: var(--accent) !important; }
.rc-ed-ico-reduire, .rc-ed--grand .rc-ed-ico-grand { display: none; }
.rc-ed--grand .rc-ed-ico-reduire { display: inline-flex; }
/* L'indication d'une zone vide (le script pose `rc-ed-zone--vide`). */
.rc-ed-zone[data-indication] { position: relative; }
.rc-ed-zone--vide[data-indication]::after { content: attr(data-indication); position: absolute; top: 12px; left: 14px;
  right: 14px; color: var(--disabled-foreground); pointer-events: none; }
.rc-ed--note:not(:focus-within) .rc-ed-zone--vide[data-indication]::after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Le menu « / » (et « + ») : posé dans la page, ou dans la fenêtre qui porte l'éditeur. */
.rc-ed-menu { position: absolute; z-index: 60; width: 300px; max-height: 330px; overflow-y: auto; padding: 6px;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.rc-ed-menu-choix { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0;
  border-radius: var(--radius-sm); background: none; color: var(--foreground); font: inherit; text-align: left; cursor: pointer; }
.rc-ed-menu-choix:hover, .rc-ed-menu-choix--vu { background: var(--muted); }
.rc-ed-menu-choix > b { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--background); color: var(--muted-foreground);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; }
.rc-ed-menu-choix > span { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-sm); }
.rc-ed-menu-choix small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-ed-menu-choix small:empty { display: none; }
.rc-ed-menu-rien { margin: 6px 8px; font-size: var(--text-sm); color: var(--muted-foreground); }

/* Écrire en grand : une fenêtre centrée, de la largeur d'une page (2 octobre
   2026 : l'écran entier laissait des marges énormes). Échap, ou l'icône, rend. */
.rc-ed--grand { position: fixed; z-index: 70; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 48px));
  background: var(--card); box-shadow: 0 0 0 100vmax rgba(5, 6, 10, .72), 0 24px 60px rgba(0, 0, 0, .5); }
.rc-ed--grand .rc-ed-zone { flex: 1; min-height: 0 !important; max-height: none; padding: 22px 26px; font-size: var(--text-base); line-height: 1.65; }
.rc-ed--grand .rc-ed-barre { order: -1; border-top: 0; border-bottom: 1px solid var(--border); padding: 6px 10px; }
html.rc-ed-plein { overflow: hidden; }
/* La fenêtre d'une note est déjà grande : pas de « grand » dedans. */
.rc-riche-fenetre [data-cmd="agrandir"] { display: none; }

@media (max-width: 767px) {
  .rc-ed--note .rc-ed-barre { flex-wrap: nowrap; overflow-x: auto; }
  .rc-ed--note .rc-ed-barre button { flex: none; min-width: 44px; height: 44px; }
  .rc-ed--note .rc-ed-zone { font-size: 16px; }
  .rc-ed--grand { top: 0; left: 0; transform: none; width: 100vw; height: 100dvh; border-radius: 0; }
  /* Sans touche Échap sous le doigt : « revenir » reste toujours visible. */
  .rc-ed--grand [data-cmd="agrandir"] { position: sticky; right: 0; background: var(--card); box-shadow: -10px 0 10px var(--card); }
  .rc-ed--grand .rc-ed-zone { padding: 16px; }
}

/* Redimensionner une image d'une note : choisie d'un clic, quatre tailles
   au-dessus, une poignée au coin (2 octobre 2026). */
.rc-ed-zone img { cursor: pointer; }
.rc-ed-zone img.rc-ed-img-choisie { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-ed-img-outils { position: absolute; z-index: 61; display: flex; gap: 2px; padding: 4px; background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.rc-ed-img-outils button { height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--muted-foreground); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.rc-ed-img-outils button:hover { background: var(--muted); color: var(--foreground); }
.rc-ed-img-outils button.rc-ed-actif { background: var(--accent-ring); color: var(--accent-hi); }
.rc-ed-img-poignee { position: absolute; z-index: 61; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--card); cursor: nwse-resize; touch-action: none; }
@media (max-width: 767px) {
  .rc-ed-img-outils button { height: 40px; padding: 0 8px; }
  .rc-ed-img-poignee { width: 26px; height: 26px; }
}
/* Une note longue, repliée hors de la zone (2 octobre 2026, `_editeur.js`). */
.rc-ed--replie .rc-ed-zone { max-height: 150px; overflow: hidden; cursor: text;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent); }

/* ── Le lien sur un mot : « Texte affiché » + « Adresse » (5 octobre 2026) ── */
.rc-ed-lien { position: absolute; z-index: 61; display: flex; flex-direction: column; gap: 8px; width: 320px;
  max-width: calc(100vw - 16px); padding: 12px; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.rc-ed-lien label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-ed-lien .rc-saisie { width: 100%; }
.rc-ed-lien-actions { display: flex; gap: 8px; margin-top: 2px; }

/* « Mes liens » (11 octobre 2026) : le menu de ses liens, en tête du pied. */
.rc-ed-liens { position: relative; display: inline-flex; margin-right: 6px; }
.rc-ed-liens-bouton { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--radius); border: 1px solid var(--accent); color: var(--accent); background: transparent;
  font-size: var(--text-sm); cursor: pointer; }
.rc-ed-liens-bouton:hover, .rc-ed-liens-bouton[aria-expanded="true"] { background: rgb(167 139 250 / 0.12); }
.rc-ed-liens-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40; width: min(340px, 86vw);
  max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45); }
.rc-ed-liens-pop[hidden], .rc-ed-liens-pop [hidden] { display: none; }
.rc-ed-liens-recherche { width: 100%; margin-bottom: 4px; }
.rc-ed-liens-groupe { display: flex; flex-direction: column; gap: 2px; }
.rc-ed-liens-titre { font-size: var(--text-xs); color: var(--muted-foreground); padding: 8px 8px 4px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.rc-ed-liens-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 8px;
  border: 0; border-radius: var(--radius); background: transparent; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.rc-ed-liens-item:hover, .rc-ed-liens-item:focus-visible { background: var(--muted); }
.rc-ed-liens-item b { font-weight: 500; font-size: var(--text-sm); }
.rc-ed-liens-item small { color: var(--muted-foreground); font-size: var(--text-xs); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-ed-liens-item small.rc-ed-liens-vide { color: var(--warning); }
.rc-ed-liens-gerer { border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 8px 2px;
  font-size: var(--text-xs); color: var(--accent); }
@media (max-width: 760px) { .rc-ed-liens-bouton { height: 36px; } .rc-ed-liens-item { padding: 10px 8px; } }
/* Le cadre de l'éditeur coupe ce qui déborde : pas le menu ouvert. */
.rc-ed:has(.rc-ed-liens-pop:not([hidden])) { overflow: visible; }

/* La bibliothèque d'entreprise (maquette du 11 octobre 2026). */
.mdl-pt--partage { color: var(--accent); background: rgb(167 139 250 / 0.16); border-color: transparent; }
.mdl-pt--partage ~ .mdl-pt { display: none; }
.mdl-partage { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mdl-partage > legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; }
.mdl-segments { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; align-self: flex-start; }
.mdl-segment { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; font-size: var(--text-sm); cursor: pointer; }
.mdl-segment input { position: absolute; opacity: 0; pointer-events: none; }
.mdl-segment:has(input:checked) { background: rgb(167 139 250 / 0.18); color: var(--accent); }
.mdl-segment:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.mdl-partage-detail { display: flex; flex-direction: column; gap: 8px; }
.mdl-partage-detail[hidden] { display: none; }
.mdl-radio { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.mdl-membres { display: flex; flex-wrap: wrap; gap: 8px; }
.mdl-membre { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-sm); }
.mdl-nom--lecture { margin: 0; font-size: var(--text-xl, 1.25rem); font-weight: 600; }
.mdl-bandeau { margin: 12px 0; padding: 10px 14px; border-radius: var(--radius-lg); font-size: var(--text-sm);
  background: rgb(167 139 250 / 0.10); border: 1px solid rgb(167 139 250 / 0.35); }
.mdl-lecture { margin: 12px 0 8px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--background); line-height: 1.6; overflow-wrap: anywhere; }
.mdl-gestes form { display: contents; }
@media (max-width: 760px) { .mdl-segment, .mdl-membre { min-height: 44px; } }
.mdl-var { color: var(--accent); }
.mdl-partage { margin: 0 0 14px; }
.mdl-bandeau svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }