/* ===== Mur façon WhatsApp — deux colonnes ===== */
.mur-app {
  display: flex; gap: 0; max-width: 1100px; margin: 1rem auto;
  border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-height: 70vh;
}

/* Colonne des thèmes */
.mur-themes {
  flex: 0 0 30%; max-width: 320px;
  background: #fff; border-right: 1px solid #e9edef;
  overflow-y: auto;
}
.mur-theme {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .9rem 1rem; text-decoration: none; color: #111b21;
  border-bottom: 1px solid #f0f2f5; transition: background .12s ease;
}
.mur-theme, .mur-theme:hover, .mur-theme:focus { text-decoration: none; }
.mur-theme:hover { background: #f5f6f6; }
.mur-theme.actif { background: #f0f2f5; }
.mur-theme-nom { font-weight: 600; font-size: .95rem; }
.mur-theme-nb {
  flex: 0 0 auto; font-size: .72rem; color: #667781;
  background: #e9edef; border-radius: 12px; padding: .05rem .5rem;
}

/* Colonne du fil */
.mur { flex: 1 1 auto; display: flex; flex-direction: column; background: #efeae2; }

.mur-entete {
  padding: .9rem 1.2rem; background: #efeae2; border-bottom: 1px solid #e9edef;
  font-weight: 600; font-size: 1rem; color: #111b21; flex: 0 0 auto;
}

.mur-cards {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.3rem; overflow-y: auto;
}
.mur-vide { color: #667781; font-size: .9rem; text-align: center; margin: auto; }

.mur-card, .mur-reply {
  position: relative; width: 50%;
  background: #fff; padding: .45rem .7rem .4rem;
  border-radius: 7.5px; border-top-left-radius: 0;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
  align-self: flex-start;
}
.mur-card::before, .mur-reply::before {
  content: ""; position: absolute; top: 0; left: -8px;
  width: 8px; height: 13px; background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.mur-mine {
  background: #d9fdd3; align-self: flex-end;
  border-top-left-radius: 7.5px; border-top-right-radius: 0;
}
.mur-mine::before {
  left: auto; right: -8px; background: #d9fdd3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.mur-auteur { margin: 0 0 .1rem; font-size: .82em; font-weight: 600; line-height: 1.2; }
.mur-texte { margin: 0; color: #111b21; font-size: .95rem; line-height: 1.35; white-space: pre-wrap; }
.mur-heure { display: block; text-align: right; font-size: .68rem; color: #667781; margin-top: .05rem; line-height: 1; }

.mur-replies {
  align-self: stretch; margin: .5rem 0 .2rem 1.4rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.mur-reply { width: auto; font-size: .95em; }

/* Barre de saisie */
.mur-form {
  display: flex; flex-wrap: wrap; gap: .5rem;
  background: #fff; padding: .7rem .8rem; border-top: 1px solid #e9edef;
}
.mur-form input[type="text"], .mur-form textarea {
  flex: 1 1 100%; padding: .6rem .9rem; border: 1px solid #e9edef; border-radius: 8px;
  background: #fff; font: inherit; color: #111b21;
}
.mur-form textarea { min-height: 44px; resize: vertical; }
.mur-form button {
  margin-left: auto; padding: .55rem 1.4rem; border: none; border-radius: 20px;
  background: #00a884; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.mur-form button:hover { background: #008f72; }
.mur-hp { display: none !important; }

.mur-ok {
  text-align: center; font-size: .82em; color: #4a6b4a; background: #d9fdd3;
  width: fit-content; margin: .6rem auto; padding: .3rem .9rem; border-radius: 12px;
}

/* Détails corriger / répondre */
.mur-edit, .mur-reply-form { margin-top: .45rem; }
.mur-edit summary, .mur-reply-form summary {
  cursor: pointer; font-size: .72rem; color: #00a884; font-weight: 600;
  list-style: none; width: fit-content;
}
.mur-edit summary::-webkit-details-marker,
.mur-reply-form summary::-webkit-details-marker { display: none; }
.mur-edit[open] summary, .mur-reply-form[open] summary { margin-bottom: .45rem; }
.mur-edit form, .mur-reply-form form { display: flex; flex-direction: column; gap: .4rem; }
.mur-edit input, .mur-edit textarea,
.mur-reply-form input, .mur-reply-form textarea {
  padding: .45rem .6rem; border: 1px solid #d1d7db; border-radius: 6px; font: inherit; font-size: .9em;
}
.mur-edit textarea, .mur-reply-form textarea { min-height: 55px; resize: vertical; }
.mur-edit button, .mur-reply-form button {
  align-self: flex-start; padding: .35rem 1rem; border: none; border-radius: 16px;
  background: #00a884; color: #fff; font: inherit; font-size: .85em; cursor: pointer;
}