/* ============================================================================
   Fil de commentaires — design "panneau de messagerie" (bulles, avatars, composer).
   Chargé par modules/co2/views/comment/commentPodSimple.php ; scopé par la classe racine
   .co-thread posée sur le pod (.footer-comments). Tout hôte qui charge le pod (preview
   #modal-preview-comment, modale d'action, discussions AAP, fil d'actus…) hérite du design.
   Le markup (commentPodSimple.php, formPostCom.php, comments.js) est inchangé.
   - Les éléments affichés/masqués par jQuery (.tools_bar, .extract_url, #falseInput,
     .form-actions, .hidden / .hidden-N) ne reçoivent JAMAIS de display !important.
   - .item-comment reste enfant direct de #comments-list-* (sélecteurs JS "> .item-comment").
   - "Mes" commentaires : classe .comment-mine posée côté serveur (commentPodSimple.php) et
     côté client (comments.js / commentTextarea.js).
   - En-tête optionnel .co-thread-head (titre + bouton fermer) injecté par l'hôte en premier
     enfant du pod (ex. action_modal/main.js) ; sans lui la ligne 1 de la grille est vide.
   - Le pod ré-injecte son propre <style> à chaque chargement : les sélecteurs gardent donc
     au moins deux classes de préfixe (.footer-comments.co-thread) pour l'emporter.
   ============================================================================ */
.footer-comments.co-thread.d-grid.textarea-to-bottom {
	grid-template-rows: min-content minmax(0, 1fr) min-content;
	background: #fff;
	border: 1px solid #e8eef5;
	border-radius: 14px;
	/* PAS d'overflow:hidden ici : la liste d'autocomplétion des  et le sélecteur
	   d'émojis sont positionnés en absolu DANS le composer et seraient tronqués. Les coins
	   arrondis sont portés par les enfants qui peignent un fond (en-tête, composer). */
	box-shadow: 0 8px 26px rgba(23, 55, 102, .08);
	padding: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #26333f;
}
.footer-comments.co-thread * { box-sizing: border-box; }
/* En-tête (équivalent .cm-head) : injecté par action_modal/main.js (decorate_comments_pod) avec le bouton fermer */
.footer-comments.co-thread.d-grid > .co-thread-head {
	border-radius: 13px 13px 0 0;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px 9px 15px;
	border-bottom: 1px solid #e8eef5;
	background: linear-gradient(180deg, #fff, #f6f9fc);
}
.footer-comments.co-thread .co-thread-head .co-thread-title {
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 15px;
	color: #26333f;
}
.footer-comments.co-thread .co-thread-head .co-thread-title svg { width: 18px; height: 18px; color: #1E56A2; flex: none; }
.footer-comments.co-thread .co-thread-head .co-thread-close {
	width: 32px;
	height: 32px;
	padding: 0;
	flex: none;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: #54677b;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.footer-comments.co-thread .co-thread-head .co-thread-close:hover { background: #eef3f9; color: #1E56A2; border-color: #e8eef5; }
.footer-comments.co-thread .co-thread-head .co-thread-close svg { width: 17px; height: 17px; }
/* Focus clavier visible sur tout ce qui se clique dans le pod ; transitions coupées si l'utilisateur le demande */
.footer-comments.co-thread .co-thread-close:focus-visible,
.footer-comments.co-thread div[id^="footer-comments-"] a:focus-visible,
.footer-comments.co-thread .tools_bar button:focus-visible,
.footer-comments.co-thread .tools_bar .uploadImageNews:focus-within,
.footer-comments.co-thread .btn-show-more-txt:focus-visible,
.footer-comments.co-thread .header-form-create-news > a.btn:focus-visible { outline: 2px solid #1E56A2; outline-offset: 2px; }
.footer-comments.co-thread .tools_bar #btn-submit-comment-form:focus-visible { outline: 2px solid #1E56A2 !important; outline-offset: 2px; }
.footer-comments.co-thread #form-comments > #falseInput:focus-visible { border-color: #1E56A2 !important; background: #fff; box-shadow: 0 0 0 3px rgba(30, 86, 162, .12); }
@media (prefers-reduced-motion: reduce) {
	.footer-comments.co-thread *, .footer-comments.co-thread *::before { transition: none !important; }
}
/* Fil (équivalent .cm-thread) */
.footer-comments.co-thread.d-grid .comments-list {
	grid-row: 2;
	min-height: 0;
	overflow-y: auto;
	padding: 14px 13px 4px !important;
	/* Surtout PAS de colonne flex ici : dans une zone à hauteur fixe qui défile, les items
	   (flex-shrink par défaut) se compressaient et se chevauchaient dès que le fil dépassait. */
	display: block;
}
.footer-comments.co-thread .comments-list > .item-comment { margin-bottom: 14px !important; }
.footer-comments.co-thread .comments-list > div[class*="link-show-more"],
.footer-comments.co-thread .comments-list > .pull-right { float: none !important; width: 100%; text-align: center; margin: 2px 0 10px !important; }
.footer-comments.co-thread .comments-list > div[class*="link-show-more"] a,
.footer-comments.co-thread .comments-list > .pull-right a {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 99px;
	border: 1px solid #dde5ee; color: #54677b; font-size: 12px; font-weight: 600; text-decoration: none;
}
.footer-comments.co-thread .comments-list > div[class*="link-show-more"] a:hover,
.footer-comments.co-thread .comments-list > .pull-right a:hover { border-color: #1E56A2; color: #1E56A2; }
/* État vide (équivalent .cm-empty) */
.footer-comments.co-thread .comments-list .noComment { gap: 8px; padding: 30px 20px; color: #647486; }
.footer-comments.co-thread .comments-list .noComment svg { width: 46px; height: 46px; opacity: .55; }
.footer-comments.co-thread .comments-list .noComment .nocom-text-title { font-size: 14px !important; font-weight: 700 !important; color: #54677b; }
.footer-comments.co-thread .comments-list .noComment .nocom-text-desc { font-size: 12.5px !important; font-style: italic; }

/* --- Un commentaire (équivalent .cm-msg) : avatar | nom / bulle / horodatage / actions --- */
.footer-comments.co-thread .item-comment {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: flex-start;
	gap: 0 8px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0;
	float: none !important;
}
.footer-comments.co-thread .item-comment > img.img-circle {
	width: 30px !important;
	height: 30px !important;
	margin: 17px 0 0 0 !important;
	float: none !important;
	flex: none;
	object-fit: cover;
	border-radius: 50%;
}
.footer-comments.co-thread .item-comment > .content-comment {
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
	max-width: calc(100% - 38px) !important;
	min-height: 0;
	float: none !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
.footer-comments.co-thread .item-comment > .content-comment > br { display: none; }
.footer-comments.co-thread .item-comment > .content-comment > .comment-container-white {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: auto !important;
	max-width: 88%;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0;
	box-shadow: none !important;
	transform: none !important;
	float: none !important;
}
/* Commentaire ciblé par une réponse : anneau bleu sur la bulle (au lieu du halo vert + zoom) */
.footer-comments.co-thread .comment-tobe-answered > .text-comment { box-shadow: 0 0 0 3px rgba(30, 86, 162, .35); }
/* Nom de l'auteur (équivalent .cm-sender) */
.footer-comments.co-thread .comment-container-white > a.text-dark,
.footer-comments.co-thread .comment-container-white > span.text-dark {
	order: 0;
	float: none !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	color: #17457f !important;
	padding-left: 2px;
	text-decoration: none;
}
.footer-comments.co-thread .comment-container-white > a.text-dark small,
.footer-comments.co-thread .comment-container-white > span.text-dark small { font-size: 11px; font-weight: 400; color: #647486; }
.footer-comments.co-thread .comment-container-white > a.text-dark small i { font-style: normal; }
.footer-comments.co-thread .comment-container-white > br { display: none; }
/* Bulle (équivalent .cm-bubble) */
.footer-comments.co-thread .comment-container-white > .text-comment {
	order: 2;
	float: none !important;
	width: fit-content !important;
	max-width: 100%;
	margin: 0;
	padding: 9px 12px !important;
	border-radius: 14px;
	border-top-left-radius: 5px;
	background: #f0f4f9;
	color: #31404f;
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}
.footer-comments.co-thread .comment-container-white > .text-comment a { color: #1E56A2; text-decoration: underline; text-underline-offset: 2px; }
.footer-comments.co-thread .comment-container-white > .btn-show-more-txt {
	order: 3;
	margin: 0 0 0 4px !important;
	padding: 4px 6px;
	min-height: 24px;
	border-radius: 6px;
	color: #1E56A2;
	font-size: 11.5px;
	font-weight: 600;
}
/* Horodatage (équivalent .cm-stamp) */
.footer-comments.co-thread .comment-container-white > .date-com {
	order: 10;
	float: none !important;
	font-size: 11px;
	line-height: 1.3;
	color: #647486;
	padding: 0 3px;
}
/* La date est rendue par directory.showDatetimePost dans un div.dateUpdated que le thème
   (default/directory.css) affiche en badge sombre positionné en absolu (cartes d'annuaire) :
   ici, simple texte dans le flux. */
.footer-comments.co-thread .date-com .dateUpdated {
	position: static;
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}
/* Médias (liens extraits, images) sous la bulle (équivalent .cm-atts) */
.footer-comments.co-thread .item-comment > .content-comment > .media-results-comment,
.footer-comments.co-thread .item-comment > .content-comment > .mediaimg-results-comment {
	width: auto !important;
	max-width: 88%;
	float: none !important;
	background: transparent !important;
}
.footer-comments.co-thread .item-comment > .content-comment > .media-results-comment:empty,
.footer-comments.co-thread .item-comment > .content-comment > .mediaimg-results-comment:empty { display: none; }
/* Actions : répondre / réagir / modifier / supprimer — discrètes, révélées au survol (équivalent .cm-mactions) */
.footer-comments.co-thread .item-comment > .content-comment > small.bold {
	width: 100%;
	font-size: 11.5px;
	font-weight: 400;
}
.footer-comments.co-thread .item-comment > .content-comment > small.bold > div[id^="footer-comments-"] {
	width: auto !important;
	float: none !important;
	/* padding-left:15px !important est inline (imbattable) : compensé par la marge négative */
	margin: 0 0 0 -13px !important;
	padding: 0 2px !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	min-height: 18px;
	color: #647486;
	opacity: .9;
	transition: opacity .12s;
}
.footer-comments.co-thread .item-comment:hover > .content-comment > small.bold > div[id^="footer-comments-"],
.footer-comments.co-thread .item-comment:focus-within > .content-comment > small.bold > div[id^="footer-comments-"] { opacity: 1; }
@media (hover: none) {
	.footer-comments.co-thread .item-comment > .content-comment > small.bold > div[id^="footer-comments-"] { opacity: 1; }
}
.footer-comments.co-thread div[id^="footer-comments-"] a {
	color: #54677b;
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 !important;
	min-height: 28px;
	padding: 0 5px;
	border-radius: 6px;
}
.footer-comments.co-thread div[id^="footer-comments-"] a:hover { color: #1E56A2; }
.footer-comments.co-thread div[id^="footer-comments-"] .reply-btn-container { display: inline-flex; align-items: center; gap: 8px; }
.footer-comments.co-thread div[id^="footer-comments-"] .fa-reply { font-size: 13px; margin: 0 !important; }
.footer-comments.co-thread div[id^="footer-comments-"] .nbNewsComment { color: #1E56A2; }
.footer-comments.co-thread div[id^="footer-comments-"] .fa-pencil,
.footer-comments.co-thread div[id^="footer-comments-"] .fa-trash { font-size: 12px; }
.footer-comments.co-thread div[id^="footer-comments-"] a:hover .fa-trash { color: #d9534f; }
/* Compteur de signalements (label Bootstrap blanc par défaut) : discret, même ton que les autres actions */
.footer-comments.co-thread div[id^="footer-comments-"] .reportAbuse .label { color: #647486 !important; font-size: 11px; font-weight: 600; padding: 0 !important; }
.footer-comments.co-thread div[id^="footer-comments-"] .reportAbuse:hover .label { color: #d9534f !important; }
.footer-comments.co-thread div[id^="footer-comments-"] div[class^="sectionHtmlCount"] { width: auto !important; float: none !important; }
/* Placeholder d'envoi ("Publication …") */
.footer-comments.co-thread .item-comment.comment-placeholder { opacity: .7; }
.footer-comments.co-thread .item-comment.comment-placeholder .comment-loader { width: auto !important; float: none !important; margin: 0 !important; font-size: 11px; color: #647486; }

/* --- Réponses : fil indenté sous le commentaire parent --- */
.footer-comments.co-thread .item-comment > .answerCommentContainer {
	flex: 0 0 calc(100% - 38px);
	width: calc(100% - 38px) !important;
	float: none !important;
	margin: 6px 0 0 38px !important;
	padding: 0 0 0 12px !important;
	border-left: 2px solid #e8eef5;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Zone de réponse rapide (équivalent .cm-composer, version compacte) */
.footer-comments.co-thread .answerCommentContainer > .content-new-comment {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 2px;
}
.footer-comments.co-thread .answerCommentContainer > .content-new-comment > img {
	width: 26px !important; height: 26px !important; margin: 5px 0 0 !important; float: none !important; flex: none; border-radius: 50%;
}
.footer-comments.co-thread .answerCommentContainer > .content-new-comment > .ctnr-txtarea { flex: 1; min-width: 0; position: static; left: auto !important; right: auto; }
.footer-comments.co-thread .answerCommentContainer textarea.textarea-new-comment,
.footer-comments.co-thread .answerCommentContainer .mentions-input-box {
	min-height: 36px;
	background: #f6f9fc !important;
	border: 1px solid #dde5ee !important;
	border-radius: 12px !important;
	font-size: 13px !important;
	color: #26333f;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
/* Une fois enveloppé par le plugin mentions, le textarea DOIT rester transparent (calque .mentions dessous) */
.footer-comments.co-thread .answerCommentContainer .mentions-input-box textarea.textarea-new-comment {
	background: transparent !important; border: none !important; border-radius: 0 !important; min-height: 34px;
}
.footer-comments.co-thread .answerCommentContainer textarea.textarea-new-comment:focus,
.footer-comments.co-thread .answerCommentContainer .mentions-input-box:focus-within {
	border-color: #1E56A2 !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(30, 86, 162, .12) !important;
}

/* --- Composer principal (bas du pod, équivalent .cm-composer) --- */
.footer-comments.co-thread.d-grid.textarea-to-bottom > .container-txtarea {
	border-radius: 0 0 13px 13px;
	grid-row: 3;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 10px 13px !important;
	border-top: 1px solid #e8eef5;
	background: #fff;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.footer-comments.co-thread .container-txtarea > img.img-circle {
	width: 30px !important; height: 30px !important; margin: 4px 0 0 !important; float: none !important; flex: none; border-radius: 50%;
}
.footer-comments.co-thread .container-txtarea > .content-new-comment { flex: 1; min-width: 0; }
.footer-comments.co-thread .container-txtarea .ctnr-txtarea { position: static; left: auto; right: auto; }
.footer-comments.co-thread .container-txtarea #formPostComTemp { float: none !important; }
.footer-comments.co-thread .form-create-comments-container {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Ligne "Écrivez votre commentaire" + croix : petit libellé (équivalent .cm-lbl) */
.footer-comments.co-thread .form-create-comments-container > .header-form-create-news {
	order: 0;
	padding: 0 2px !important;
	margin: 0 !important;
	background: transparent !important;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #54677b !important;
}
.footer-comments.co-thread .header-form-create-news > .fa-angle-down { display: none; }
.footer-comments.co-thread .header-form-create-news > #icon-write-msg { color: #1E56A2; }
.footer-comments.co-thread .header-form-create-news > a.btn {
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #647486;
	display: inline-flex; align-items: center; justify-content: center;
	float: none !important;
}
.footer-comments.co-thread .header-form-create-news > a.btn:hover { background: #eef3f9 !important; color: #26333f; }
/* Champ de saisie (replié : #falseInput ; déplié : textarea dans .extract_url) */
.footer-comments.co-thread .form-create-comments-container > #form-comments {
	order: 1;
	width: 100% !important;
	float: none !important;
	background: transparent !important;
}
.footer-comments.co-thread #form-comments > #falseInput {
	width: 100% !important;
	float: none !important;
	height: auto;
	padding: 9px 12px !important;
	background: #f6f9fc;
	border: 1px solid #dde5ee !important;
	border-radius: 12px;
	font-size: 13.5px;
	font-family: inherit;
	color: #26333f;
	box-shadow: none;
	outline: none;
	cursor: text;
}
.footer-comments.co-thread #form-comments > #falseInput:hover { border-color: #b9cde8 !important; }
.footer-comments.co-thread #form-comments > .extract_url > .bg-white {
	background: #f6f9fc !important;
	border: 1px solid #dde5ee;
	border-radius: 12px;
	padding: 3px 4px;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.footer-comments.co-thread #form-comments > .extract_url > .bg-white:focus-within {
	border-color: #1E56A2;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(30, 86, 162, .12);
}
.footer-comments.co-thread #form-comments .mentions-input-box { background: transparent; }
.footer-comments.co-thread #form-comments textarea.get-url-comment-input {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 13.5px;
	line-height: 1.4;
	color: #26333f;
	min-height: 40px;
	resize: none;
}
.footer-comments.co-thread #form-comments .markdown-interpreter { background: transparent !important; font-family: inherit; font-size: 13.5px; }
.footer-comments.co-thread #form-comments .md-preview,
.footer-comments.co-thread #form-comments #commentResults,
.footer-comments.co-thread #form-comments #commentResultsImg { border-radius: 10px; }
/* Barre d'outils sous le champ : image, émoji, markdown à gauche ; Envoyer à droite (équivalent .cm-attach / .cm-send) */
.footer-comments.co-thread .form-create-comments-container > .tools_bar {
	order: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}
.footer-comments.co-thread .tools_bar .user-image-buttons,
.footer-comments.co-thread .tools_bar .user-file-buttons { float: none !important; background: transparent !important; }
.footer-comments.co-thread .tools_bar #photoPostCom { margin: 0; }
.footer-comments.co-thread .tools_bar .uploadImageNews,
.footer-comments.co-thread .tools_bar #btn-fcn-emoji-comments {
	width: 34px;
	height: 34px !important;
	margin: 0;
	padding: 0 !important;
	border: none !important;
	border-radius: 10px;
	background: transparent !important;
	box-shadow: none !important;
	color: #54677b;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.footer-comments.co-thread .tools_bar .uploadImageNews:hover,
.footer-comments.co-thread .tools_bar #btn-fcn-emoji-comments:hover { background: #eef3f9 !important; color: #1E56A2; }
.footer-comments.co-thread .tools_bar .uploadImageNews .fileupload-new { display: inline-flex; }
.footer-comments.co-thread .tools_bar .md-toolbar { flex: 1; min-width: 0; height: auto !important; }
.footer-comments.co-thread .tools_bar #btn-submit-comment-form {
	margin-left: auto;
	height: 34px !important;
	padding: 0 12px 0 14px !important;
	transform: none !important;
	align-items: center !important;
	justify-content: center;
	gap: 6px;
	border: none !important;
	border-radius: 11px;
	background: #1E56A2 !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	box-shadow: none !important;
	float: none !important;
}
.footer-comments.co-thread .tools_bar #btn-submit-comment-form:hover { background: #17457f !important; }
.footer-comments.co-thread .tools_bar #btn-submit-comment-form > span { padding: 0 !important; margin: 0 !important; }
.footer-comments.co-thread .tools_bar #btn-submit-comment-form i { display: inline-flex; align-items: center; }
.footer-comments.co-thread .tools_bar #btn-submit-comment-form svg { width: 15px; height: 15px; }
/* --- Mes commentaires : à droite, bulle bleue, sans avatar (équivalent .cm-msg.out) --- */
.footer-comments.co-thread .item-comment.comment-mine > img.img-circle,
.footer-comments.co-thread .item-comment.comment-placeholder > img.img-circle { display: none; }
.footer-comments.co-thread .item-comment.comment-mine > .content-comment,
.footer-comments.co-thread .item-comment.comment-placeholder > .content-comment { max-width: 100% !important; align-items: flex-end; }
.footer-comments.co-thread .item-comment.comment-mine > .content-comment > .comment-container-white,
.footer-comments.co-thread .item-comment.comment-placeholder > .content-comment > .comment-container-white { align-items: flex-end; }
.footer-comments.co-thread .item-comment.comment-mine .comment-container-white > .text-comment,
.footer-comments.co-thread .item-comment.comment-placeholder .comment-container-white > .text-comment {
	background: #1E56A2;
	color: #fff;
	border-top-left-radius: 14px;
	border-top-right-radius: 5px;
}
.footer-comments.co-thread .item-comment.comment-mine .comment-container-white > .text-comment a { color: #dbe8fb; text-decoration: underline; }
.footer-comments.co-thread .item-comment.comment-mine .comment-container-white > .date-com { text-align: right; }
.footer-comments.co-thread .item-comment.comment-mine > .content-comment > small.bold > div[id^="footer-comments-"] { justify-content: flex-end; margin-left: 0 !important; }
.footer-comments.co-thread .item-comment.comment-mine > .content-comment > .media-results-comment,
.footer-comments.co-thread .item-comment.comment-mine > .content-comment > .mediaimg-results-comment { align-self: flex-end; }

/* --- Commentaires argumentés (vote pour/contre, hôte coopération) ---
   Le thème colore .item-comment.bg-green-comment / .bg-red-comment (co-color.css) ; ici le fond est
   porté par la bulle, donc la polarité serait perdue. Bordure + teinte pour ne pas la coder que par la couleur. */
.footer-comments.co-thread .item-comment.bg-green-comment .comment-container-white > .text-comment {
	background: #e6f4ea;
	color: #26333f;
	border-left: 3px solid #2e7d32;
}
.footer-comments.co-thread .item-comment.bg-red-comment .comment-container-white > .text-comment {
	background: #fbe9e7;
	color: #26333f;
	border-left: 3px solid #c0392b;
}

/* --- Hôtes particuliers --- */
/* Le pod compensait les paddings de ses hôtes par des marges négatives (commentPodSimple.php) :
   la carte bordée n'en veut pas. */
.footer-comments.co-thread { margin: 0 !important; }
/* Panneau de preview : le padding 1rem que le pod s'applique (règle inline) est reporté sur l'hôte,
   sinon la carte bordée touche les bords du panneau. */
#modal-preview-comment .comment-tree { padding: 0 1rem 1rem; }
#modal-preview-comment .comment-tree .footer-comments.co-thread.d-grid.textarea-to-bottom { padding: 0 !important; }
/* Hôte sans hauteur bornée (fil d'actus, dialogues…) : height:100% vaut auto, la liste ne défile
   pas en interne ; le pod pousse simplement la page. */