/* ==========================================================
   Community Frontend — Fil social v0.2.0
   Cartes compactes, menu d'actions discret (⋯), icônes SVG
   inline légères (aucune librairie externe).
   ========================================================== */

.cf-feed-social {
	font-family: var(--community-font-sans, var(--cc-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
	max-width: 620px;
	margin: 0 auto;
	color: var(--community-text, var(--cc-color-text, #172033));
	font-size: 14px;
}

.cf-feed-social__title { font-size: 19px; font-weight: 700; margin: 0 0 16px; }

.cf-notice {
	border-radius: var(--community-radius-md, 10px);
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 13px;
	background: var(--community-surface, #fff);
	border: 1px solid var(--community-border, #e2e8f0);
}
.cf-notice--error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

/* --- Composer --- */

.cf-feed-social__composer {
	background: var(--community-surface, #fff);
	border: 1px solid var(--community-border, #e2e8f0);
	border-radius: var(--community-radius-md, 10px);
	padding: 14px;
	margin-bottom: 16px;
	box-shadow: var(--community-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));
}
.cf-feed-social__composer textarea {
	width: 100%;
	min-height: 60px;
	border: 1px solid var(--community-border, #e2e8f0);
	border-radius: var(--community-radius-sm, 6px);
	padding: 9px 10px;
	margin-bottom: 10px;
	font-family: inherit;
	font-size: 13.5px;
	resize: vertical;
}

.cf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--community-radius-sm, 6px);
	border: 1px solid var(--community-border, #e2e8f0);
	background: var(--community-surface, #fff);
	cursor: pointer;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--community-text, #172033);
}
.cf-button--primary { background: var(--community-primary, #14b8a6); border-color: var(--community-primary, #14b8a6); color: #fff; }
.cf-button--primary:hover { background: var(--community-primary-dark, #0f766e); }
.cf-button--sm { padding: 5px 11px; font-size: 12px; }

.cf-feed-social__empty { color: var(--community-text-muted, #64748b); text-align: center; padding: 24px; }

/* --- Carte publication --- */

.cf-post {
	background: var(--community-surface, #fff);
	border: 1px solid var(--community-border, #e2e8f0);
	border-radius: var(--community-radius-md, 10px);
	padding: 14px;
	margin-bottom: 10px;
}

.cf-post__header { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.cf-post__header img { border-radius: 50%; flex-shrink: 0; }
.cf-post__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cf-post__author { font-weight: 600; font-size: 13.5px; }
.cf-post__date { font-size: 11.5px; color: var(--community-text-muted, #64748b); }

.cf-post__menu { flex-shrink: 0; }
.cf-post__menu summary { list-style: none; }
.cf-post__menu summary::-webkit-details-marker { display: none; }
.cf-post__js-required { display: block; padding: 6px 10px; font-size: 11px; color: var(--community-text-muted, #64748b); }

/* Repli autonome pour .community-menu / .community-btn--icon : le
   thème dédié (Community LMS) les définit déjà, mais Community
   Frontend ne doit jamais dépendre d'un thème précis pour rester
   utilisable. */
.community-menu { position: relative; display: inline-block; }
.community-btn--icon {
	width: 30px; height: 30px; padding: 0; border-radius: 50%;
	border: none; background: transparent; cursor: pointer;
	color: var(--community-text-muted, #64748b); font-size: 17px; line-height: 1;
}
.community-btn--icon:hover { background: var(--community-bg, #f8fafc); color: var(--community-text, #172033); }
.community-menu__panel {
	position: absolute; right: 0; top: calc(100% + 4px); min-width: 150px;
	background: var(--community-surface, #fff); border: 1px solid var(--community-border, #e2e8f0);
	border-radius: var(--community-radius-md, 10px); box-shadow: var(--community-shadow-md, 0 4px 12px rgba(15,23,42,.1));
	padding: 6px; z-index: 20;
}
.community-menu__item {
	display: block; width: 100%; text-align: left; background: none; border: none;
	padding: 7px 9px; font-size: 13px; color: var(--community-text, #172033);
	border-radius: var(--community-radius-sm, 6px); cursor: pointer; font-family: inherit;
}
.community-menu__item:hover { background: var(--community-bg, #f8fafc); }
.community-menu__item--danger { color: var(--community-danger, #dc2626); }

.cf-post__content { white-space: pre-wrap; margin: 0 0 10px; word-break: break-word; font-size: 14px; line-height: 1.55; }

.cf-post__footer { display: flex; align-items: center; gap: 4px; padding-top: 6px; border-top: 1px solid var(--community-border, #e2e8f0); }

.cf-post__action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: var(--community-radius-sm, 6px);
	border: none;
	background: none;
	color: var(--community-text-muted, #64748b);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.cf-post__action:hover { background: var(--community-bg, #f8fafc); color: var(--community-text, #172033); }
.cf-post__action.is-active { color: var(--community-danger, #dc2626); }
.cf-post__action.is-active svg { fill: currentColor; }
.cf-post__action--readonly { cursor: default; }
.cf-post__action--readonly:hover { background: none; color: var(--community-text-muted, #64748b); }

/* --- Commentaires : compacts --- */

.cf-post__comments { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--community-border, #e2e8f0); }
.cf-comment-list { list-style: none; margin: 0 0 8px; padding: 0; }
.cf-comment { display: flex; gap: 8px; padding: 6px 0; }
.cf-comment img { border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.cf-comment__body { flex: 1; min-width: 0; }
.cf-comment__meta { margin: 0; font-size: 12px; }
.cf-comment__content { margin: 1px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--community-text, #172033); }
.cf-comment--empty { color: var(--community-text-muted, #64748b); font-style: italic; font-size: 12.5px; padding-left: 0; }

.cf-comment-form { display: flex; gap: 8px; }
.cf-comment-form input[type="text"] {
	flex: 1;
	border: 1px solid var(--community-border, #e2e8f0);
	border-radius: var(--community-radius-sm, 6px);
	padding: 7px 10px;
	font-size: 13px;
}

.cf-feed-social__load-more { text-align: center; margin-top: 6px; }

@media (min-width: 640px) { .cf-feed-social { padding: 0 16px; } }

@media (prefers-reduced-motion: reduce) { .cf-feed-social * { transition: none !important; animation: none !important; } }