/* =====================================================================
   Missives entre sections (js/lib/missives-commun.js), classes mx-*.
   Feuille neutre : les couleurs suivent le texte de la coquille hôte
   (currentColor), lisibles sur fond clair comme sur fond sombre.
   Variables réglables par l'hôte : --mx-accent, --mx-fond-saisie.
   ===================================================================== */
.mx {
  --mx-accent: #c8892f;
  --mx-trait: color-mix(in srgb, currentColor 18%, transparent);
  --mx-voile: color-mix(in srgb, currentColor 6%, transparent);
  --mx-voile-fort: color-mix(in srgb, currentColor 11%, transparent);
  display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%;
}
.mx * { box-sizing: border-box; }
.mx .mx-titre { margin: 0; font-size: 1.35rem; line-height: 1.25; overflow-wrap: anywhere; }
.mx .mx-doux { margin: 0; opacity: .72; font-size: .92rem; }
.mx .mx-alerte { margin: 0; padding: 10px 12px; border: 1px solid #b5432f; border-radius: 8px; }
.mx .mx-vide { margin: 0; padding: 22px 12px; text-align: center; opacity: .75; border: 1px dashed var(--mx-trait); border-radius: 10px; }
.mx .mx-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.mx .mx-tete > div { min-width: 0; flex: 1 1 240px; }
.mx .mx-retour { align-self: flex-start; font-size: .9rem; color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; }
.mx .mx-retour::before { content: "\2190\00a0"; }
.mx .mx-cache-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* boutons par défaut (l'hôte peut fournir les siens) */
.mx .mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; margin: 0;
  padding: 8px 14px; border: 1px solid var(--mx-trait); border-radius: 8px; background: var(--mx-voile);
  color: inherit; font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; text-decoration: none;
  box-shadow: none; cursor: pointer; white-space: nowrap;
}
.mx .mx-btn:hover { background: var(--mx-voile-fort); color: inherit; }
.mx .mx-btn.mx-principal { background: var(--mx-accent); border-color: var(--mx-accent); color: #1b1209; }
.mx .mx-btn.mx-principal:hover { filter: brightness(1.08); }
.mx .mx-btn:disabled { opacity: .55; cursor: progress; }
.mx :focus-visible { outline: 2px solid var(--mx-accent); outline-offset: 2px; }

/* boîte */
.mx .mx-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mx .mx-fil {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border: 1px solid var(--mx-trait);
  border-radius: 10px; background: var(--mx-voile); color: inherit; text-decoration: none; min-width: 0;
}
.mx .mx-fil:hover { background: var(--mx-voile-fort); color: inherit; }
.mx .mx-cachet { position: relative; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; border: 2px solid var(--mx-trait); }
.mx .mx-non-lu .mx-cachet { background: var(--mx-accent); border-color: var(--mx-accent); }
.mx .mx-non-lu .mx-objet { font-weight: 800; }
.mx .mx-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx .mx-objet { font-weight: 600; overflow-wrap: anywhere; }
.mx .mx-de { font-size: .88rem; opacity: .8; overflow-wrap: anywhere; }
.mx .mx-extrait { font-size: .86rem; opacity: .66; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx .mx-quand { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .8rem; opacity: .7; white-space: nowrap; text-align: right; }

/* fil */
.mx .mx-messages { display: flex; flex-direction: column; gap: 10px; }
.mx .mx-msg { padding: 11px 13px; border: 1px solid var(--mx-trait); border-radius: 10px; background: var(--mx-voile); min-width: 0; margin-right: 8%; }
.mx .mx-msg.mx-moi { margin-right: 0; margin-left: 8%; border-color: color-mix(in srgb, var(--mx-accent) 45%, transparent); background: color-mix(in srgb, var(--mx-accent) 9%, transparent); }
.mx .mx-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 5px; font-size: .88rem; }
.mx .mx-meta time { opacity: .65; }
.mx .mx-etiquette { padding: 1px 7px; border: 1px solid var(--mx-trait); border-radius: 999px; font-size: .76rem; opacity: .85; }
.mx .mx-texte { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }

/* saisie */
.mx .mx-form, .mx .mx-repondre { display: flex; flex-direction: column; gap: 12px; }
.mx .mx-bloc { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mx .mx-bloc > legend, .mx .mx-bloc > label { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .92rem; }
.mx .mx-saisie, .mx .mx-ligne, .mx .mx-recherche { width: 100%; max-width: 100%; font: inherit; }
.mx .mx-saisie { min-height: 110px; resize: vertical; }
.mx .mx-saisie.mx-haut { min-height: 180px; }
.mx .mx-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.mx .mx-astuce { margin-right: auto; font-size: .82rem; }
.mx .mx-choix {
  display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; margin-top: 8px;
  padding: 4px; border: 1px solid var(--mx-trait); border-radius: 10px; overscroll-behavior: contain;
}
.mx .mx-option {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; width: 100%;
  min-height: 0; margin: 0; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit;
  font: inherit; text-align: left; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer;
}
.mx .mx-option:hover, .mx .mx-option:focus-visible { background: var(--mx-voile-fort); color: inherit; }
.mx .mx-option.mx-collectif .mx-option-nom { font-weight: 700; }
.mx .mx-option-nom { font-weight: 600; overflow-wrap: anywhere; }
.mx .mx-option-info { font-size: .82rem; opacity: .7; overflow-wrap: anywhere; }
.mx .mx-puce {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--mx-accent) 55%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--mx-accent) 10%, transparent);
}
.mx .mx-puce > span { display: flex; flex-direction: column; min-width: 0; }
.mx .mx-puce small { opacity: .72; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .mx .mx-fil { gap: 10px; padding: 10px; }
  .mx .mx-quand { font-size: .76rem; }
  .mx .mx-msg, .mx .mx-msg.mx-moi { margin-left: 0; margin-right: 0; }
  .mx .mx-astuce { display: none; }
  .mx .mx-actions > * { flex: 1 1 auto; }
}