/* Hot Milk Magazine : communauté des pros (module communaute, 12/10/2026). Coach référent, réseau, messages, forum
   dans /pro/ (classes hmm-com-*) et panneau des coachs /coach/ (classes hmc-*, sur la base de redaction.css).
   Jetons de l'espace pro (--hm-pro*, bleu nuit) et du thème (--hm-*). Mobile d'abord. */

.hmm-com { --hmm-com-filet: var(--hm-filet, rgba(22, 32, 43, 0.12)); }
.hmm-com-h2 { margin: 0 0 6px; font-family: var(--hm-police-titre, inherit); font-size: 20px; line-height: 1.25; color: var(--hm-encre, #16202b); display: flex; align-items: center; gap: 8px; }
.hmm-com-muet { margin: 0; color: var(--hm-secondaire, #56626f); font-size: 15px; }
.hmm-com-espace { margin-top: 28px; }
.hmm-com-retour { margin: 0 0 16px; }
.hmm-com-retour a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--hm-pro-texte, #22364a); text-decoration: none; }
.hmm-com-retour a:hover { text-decoration: underline; }
.hmm-com-inline { display: inline-block; margin: 10px 10px 0 0; }

/* Pastilles */
.hmm-com-pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--hm-pro-pale, #dfe7ee); color: var(--hm-pro-texte, #22364a); font-size: 13px; font-weight: 700; white-space: nowrap; }
.hmm-com-pastille--vert { background: var(--hm-olive-pale, #eaeedb); color: var(--hm-olive, #4a5722); }
.hmm-com-pastille--gris { background: var(--hm-surface-2, #e9eeec); color: var(--hm-secondaire, #56626f); }

/* Listes de fils (questions, conversations, sujets) */
.hmm-com-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hmm-com-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--hm-surface, #fff); border: 1px solid var(--hmm-com-filet); border-radius: var(--hm-r-sm, 10px); min-width: 0; }
.hmm-com-ligne.is-nouveau { border-left: 4px solid var(--hm-pro, #3d5a72); }
.hmm-com-ligne.is-epingle { background: var(--hm-pro-brume, #eef2f6); }
.hmm-com-ligne__lien { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; color: var(--hm-encre, #16202b); text-decoration: none; }
.hmm-com-ligne__lien b { font-size: 17px; overflow-wrap: anywhere; }
.hmm-com-ligne__lien small { color: var(--hm-secondaire, #56626f); font-size: 14px; }
.hmm-com-ligne__lien:hover b { color: var(--hm-pro-texte, #22364a); text-decoration: underline; }
.hmm-com-nb { display: inline-flex; align-items: center; gap: 4px; color: var(--hm-secondaire, #56626f); font-weight: 700; font-size: 15px; }

/* Coach */
.hmm-com-coach { display: grid; gap: 18px; }
.hmm-com-coach__qui { display: flex; align-items: center; gap: 16px; }
.hmm-com-coach__bio p { margin: 0 0 8px; }
@media (min-width: 900px) { .hmm-com-coach { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }

/* Fil de messages */
.hmm-com-messages { display: grid; gap: 14px; margin-bottom: 22px; }
.hmm-com-msg { padding: 16px 18px; background: var(--hm-surface, #fff); border: 1px solid var(--hmm-com-filet); border-radius: var(--hm-r-sm, 10px); min-width: 0; scroll-margin-top: 140px; }
.hmm-com-msg--moi { background: var(--hm-pro-brume, #eef2f6); }
.hmm-com-msg:target { outline: 3px solid var(--hm-accent, #c4253a); outline-offset: 2px; }
.hmm-com-msg__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hmm-com-msg__tete span:not(.hmm-pro-avatar) { display: grid; flex: 1 1 auto; min-width: 0; }
.hmm-com-msg__tete small { color: var(--hm-secondaire, #56626f); font-size: 14px; }
.hmm-com-msg__tete time { color: var(--hm-secondaire, #56626f); font-size: 14px; }
.hmm-com-msg__texte { overflow-wrap: anywhere; line-height: 1.6; }
.hmm-com-msg__texte p { margin: 0 0 10px; }
.hmm-com-msg__texte p:last-child { margin-bottom: 0; }
.hmm-com-signaler { margin-top: 8px; font-size: 14px; }
.hmm-com-signaler summary { cursor: pointer; color: var(--hm-secondaire, #56626f); display: inline-block; }
.hmm-com-signaler form { display: grid; gap: 8px; margin-top: 8px; max-width: 420px; }
.hmm-com-repondre { margin-top: 10px; }
/* Conversations (coach, messages privés) en bulles : les miennes à droite */
.hmm-com-messages--chat { gap: 10px; }
.hmm-com-messages--chat .hmm-com-msg { max-width: min(680px, 88%); justify-self: start; border-radius: 16px 16px 16px 4px; }
.hmm-com-messages--chat .hmm-com-msg--moi { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--hm-pro-pale, #dfe7ee); border-color: transparent; }
.hmm-com-messages--chat .hmm-com-msg--moi .hmm-pro-avatar { display: none; }

/* Encart « Une question de pratique ? » (colonne, tableau de bord, Mon compte), à la place du canal WhatsApp */
.hmm-com-encart { background: var(--hm-pro-pale, #dfe7ee); }
.hmm-com-encart .hmm-pro-whatsapp__titre, .hmm-com-encart .hmm-pro-whatsapp__titre svg { color: var(--hm-pro-texte, #22364a); }
.hmm-com-encart__msg { font-size: 14px; font-weight: 700; color: var(--hm-pro-texte, #22364a); }

/* Réseau */
.hmm-com-consent { margin-bottom: 22px; }
.hmm-com-consent summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.hmm-com-consent[open] summary { margin-bottom: 14px; }
.hmm-com-case { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.hmm-com-case input { margin-top: 5px; flex: none; width: 20px; height: 20px; }
.hmm-com-filtres { display: grid; gap: 12px; margin-bottom: 14px; }
.hmm-com-filtres select, .hmm-com-filtres input { width: 100%; }
.hmm-com-filtres__ok { display: flex; gap: 14px; align-items: center; margin: 0; }
@media (min-width: 760px) { .hmm-com-filtres { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } }
.hmm-com-annuaire { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .hmm-com-annuaire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .hmm-com-annuaire { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hmm-com-membre p { margin: 0; }
.hmm-com-membre__qui { display: flex; gap: 12px; align-items: center; }
.hmm-com-membre__nom { margin: 0; font-size: 18px; font-family: var(--hm-police-titre, inherit); }
.hmm-com-membre__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto !important; }
.hmm-com-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hmm-com-tags span { padding: 2px 10px; border-radius: 999px; background: var(--hm-pro-brume, #eef2f6); font-size: 13px; font-weight: 700; color: var(--hm-pro-texte, #22364a); }

/* Forum (anonyme, revue UX du 12/10) */
.hmm-com-anonyme { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--hm-pro-pale, #dfe7ee); color: var(--hm-pro-texte, #22364a); }
.hmm-com-question { margin-bottom: 6px; }
.hmm-com-question__aide { margin-bottom: 20px; }
.hmm-com-coach-tete { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.hmm-com-coach-tete .hmm-com-coach__qui { min-width: 0; }
.hmm-com-ia { margin-bottom: 22px; }
.hmm-com-ia__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.hmm-com-ia__form input { flex: 1 1 260px; min-width: 0; min-height: 48px; font-size: 17px; }
.hmm-com-ia__reponse { display: grid; gap: 10px; margin-top: 12px; padding: 16px 18px; border-radius: var(--hm-r-sm, 10px); background: var(--hm-pro-brume, #eef2f6); }
.hmm-com-ia__reponse p { margin: 0; }
.hmm-com-cite { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--hm-accent, #c4253a); }
.hmm-com-cite p { margin: 0 0 4px; font-style: italic; }
.hmm-com-cite a { font-weight: 700; font-size: 14px; color: var(--hm-pro-texte, #22364a); }
.hmm-com-forum-barre { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hmm-com-forum-barre .hmm-r-themes { flex: 1 1 auto; min-width: 0; }
.hmm-com-cherche { display: flex; gap: 8px; margin-bottom: 16px; }
.hmm-com-cherche input { flex: 1 1 auto; min-width: 0; }
.hmm-com-pages { display: flex; gap: 10px; justify-content: space-between; margin-top: 16px; }

/* ---------- Panneau des coachs (/coach/) et écrans Gestion (panneau de la rédaction) ---------- */
.hmc-retard td:first-child { box-shadow: inset 4px 0 0 #b4404d; }
.hmc-fil { display: grid; gap: 12px; margin-bottom: 18px; }
.hmc-msg { margin: 0; }
.hmc-msg__tete { margin: 0 0 6px; }
.hmc-msg--coach { background: #f4f7fa; }
.hmc-msg--masque { opacity: 0.6; }
.hmr-coach { padding: 10px 0; border-bottom: 1px solid rgba(22, 32, 43, 0.1); }
.hmr-coach summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hmr-coach form { margin-top: 10px; }

/* Tableau de bord : du nouveau dans les sujets du forum où l'on a écrit (revue UX du 12/10). */
.hmm-com-nouveau .hmm-tdb__h2 { display: flex; align-items: center; gap: 8px; }
.hmm-com-nouveau__liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.hmm-com-nouveau__liste a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--hm-bordure, #dfe3e6); border-left: 4px solid var(--hm-pro-texte, #22364a); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.hmm-com-nouveau__liste a:hover, .hmm-com-nouveau__liste a:focus-visible { background: var(--hm-pro-pale, #dfe7ee); }
.hmm-com-nouveau__titre { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.hmm-com-nouveau__liste small { flex: none; color: var(--hm-secondaire, #56626f); font-size: 14px; }