/* ============================================================
   HMM Live — Frontend CSS (Phase 5 — totalement variabilisé)

   Toutes les valeurs visuelles importantes sont des variables CSS
   (--hmm-live-*). Elles sont surchargées en inline `style="..."`
   sur l'élément racine `.hmm-live-front` selon les réglages
   du module WPBakery.

   Si vous voulez personnaliser EN DEHORS du module WPBakery,
   ajoutez votre propre <style> dans la page :

     .hmm-live-front {
         --hmm-live-accent: #8224E3;
         --hmm-live-bg-item: #fafafa;
         ...
     }
   ============================================================ */

/* ─── Variables par défaut (= préréglage France Info rouge) ─── */
.hmm-live-front {
	/* Couleur d'accent principale */
	--hmm-live-accent:                #e63946;
	--hmm-live-accent-dark:           #c8273a;

	/* Texte / titres */
	--hmm-live-title-color:           #1a1a2e;
	--hmm-live-desc-color:            #555;
	--hmm-live-text-color:            #2c2c2c;
	--hmm-live-author-color:          #1a1a2e;
	--hmm-live-time-color:            #999;
	--hmm-live-link-color:            var(--hmm-live-accent);

	/* Fonds */
	--hmm-live-bg-global:             transparent;
	--hmm-live-bg-item:               #ffffff;
	--hmm-live-bg-question:           #f5f9ff;
	--hmm-live-bg-reply:              #f7faf7;
	--hmm-live-bg-empty:              #fafbfd;

	/* Bordures */
	--hmm-live-border-color:          #e8eef9;
	--hmm-live-border-question:       #1a4a9c;
	--hmm-live-border-reply:          #2e7d32;
	--hmm-live-border-width:          1px;
	--hmm-live-border-style:          solid;
	--hmm-live-radius-item:           12px;
	--hmm-live-radius-button:         24px;
	--hmm-live-radius-modal:          12px;

	/* Espacements */
	--hmm-live-padding-item:          16px 18px;
	--hmm-live-padding-global:        0;
	--hmm-live-gap-items:             16px;

	/* Typographie */
	--hmm-live-title-size:            28px;
	--hmm-live-author-size:           14px;
	--hmm-live-content-size:          15px;
	--hmm-live-time-size:             12px;
	--hmm-live-font-family:           inherit;

	/* Bouton "Participer" */
	--hmm-live-participate-bg:        #1a1a2e;
	--hmm-live-participate-text:      #ffffff;
	--hmm-live-participate-bg-hover:  var(--hmm-live-accent);

	/* Actions item (Like / Débattre / Signaler) */
	--hmm-live-action-color:          #777;
	--hmm-live-action-color-hover:    #1a4a9c;
	--hmm-live-action-bg-hover:       #f5f9ff;
	--hmm-live-like-active-bg:        #fee;
	--hmm-live-like-active-color:     var(--hmm-live-accent);

	/* Bouton modal (Publier ma question / Envoyer) */
	--hmm-live-submit-bg:             #0072FF;
	--hmm-live-submit-text:           #ffffff;
	--hmm-live-submit-bg-hover:       #005fd9;

	/* Badges */
	--hmm-live-badge-status-bg:       var(--hmm-live-accent);
	--hmm-live-badge-status-text:     #ffffff;
	--hmm-live-badge-question-bg:     #1a4a9c;
	--hmm-live-badge-question-text:   #ffffff;

	/* Hauteur max du fil avant scroll */
	--hmm-live-feed-max-height:       700px;

	/* ─── Application des variables sur le conteneur lui-même */
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--hmm-live-font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--hmm-live-text-color);
	background: var(--hmm-live-bg-global);
	padding: var(--hmm-live-padding-global);
}

/* ─── État vide / pas d'event ───────────────────────────── */
.hmm-live-empty {
	max-width: 720px;
	margin: 20px auto;
	padding: 40px;
	text-align: center;
	background: #fafafa;
	border: 1px dashed #ddd;
	border-radius: 8px;
	color: #999;
}

/* ─── Header ─────────────────────────────────────────────── */
.hmm-live-front-header {
	text-align: center;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hmm-live-border-color);
}

.hmm-live-front-status {
	display: inline-block;
	padding: 6px 14px;
	background: var(--hmm-live-badge-status-bg);
	color: var(--hmm-live-badge-status-text);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	border-radius: 4px;
	margin-bottom: 12px;
}

.hmm-live-front-status.hmm-live-front-status-live.hmm-live-pulse-on {
	animation: hmm-live-front-pulse 2s infinite;
}

@keyframes hmm-live-front-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.5); }
	50%      { box-shadow: 0 0 0 8px rgba(230, 57, 70, 0); }
}

.hmm-live-front-status-paused   { background: #b8860b; }
.hmm-live-front-status-ended    { background: #2e7d32; }
.hmm-live-front-status-upcoming { background: #1a4a9c; }

.hmm-live-front-title {
	margin: 8px 0 6px;
	font-size: var(--hmm-live-title-size);
	font-weight: 800;
	color: var(--hmm-live-title-color);
}

.hmm-live-front-desc {
	margin: 6px 0 0;
	color: var(--hmm-live-desc-color);
	font-size: 14px;
	line-height: 1.5;
}

/* ─── Fil principal ──────────────────────────────────────── */
.hmm-live-front-feed {
	display: flex;
	flex-direction: column;
	gap: var(--hmm-live-gap-items);
	max-height: var(--hmm-live-feed-max-height);
	overflow-y: auto;
	padding-right: 8px;
	scroll-behavior: smooth;
}

.hmm-live-front-feed::-webkit-scrollbar { width: 8px; }
.hmm-live-front-feed::-webkit-scrollbar-track { background: transparent; }
.hmm-live-front-feed::-webkit-scrollbar-thumb {
	background: var(--hmm-live-border-color);
	border-radius: 4px;
}
.hmm-live-front-feed::-webkit-scrollbar-thumb:hover { background: var(--hmm-live-accent); }

.hmm-live-front-empty {
	padding: 40px;
	text-align: center;
	background: var(--hmm-live-bg-empty);
	border: 1px dashed var(--hmm-live-border-color);
	border-radius: 8px;
	color: #999;
}

/* ─── Item ───────────────────────────────────────────────── */
.hmm-live-front-item {
	background: var(--hmm-live-bg-item);
	border: var(--hmm-live-border-width) var(--hmm-live-border-style) var(--hmm-live-border-color);
	border-radius: var(--hmm-live-radius-item);
	padding: var(--hmm-live-padding-item);
	transition: box-shadow 0.2s;
}

.hmm-live-front-item:hover {
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.hmm-live-front-item.is-question {
	border-left: 4px solid var(--hmm-live-border-question);
	background: linear-gradient(to right, var(--hmm-live-bg-question) 0%, var(--hmm-live-bg-item) 30%);
}

.hmm-live-front-item.is-deleted {
	opacity: 0.7;
	border-style: dashed;
}

.hmm-live-front-item.is-reply {
	background: var(--hmm-live-bg-reply);
}

.hmm-live-front-item.is-new {
	animation: hmm-live-front-slide-in 0.4s ease-out;
}

@keyframes hmm-live-front-slide-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── Header item ─────────────────────────────────────────── */
.hmm-live-front-item-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}

.hmm-live-front-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.hmm-live-front-avatar-default {
	background: var(--hmm-live-badge-question-bg);
	color: var(--hmm-live-badge-question-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
}

.hmm-live-front-author-block {
	flex: 1;
	min-width: 0;
}

.hmm-live-front-author-name {
	font-weight: 700;
	color: var(--hmm-live-author-color);
	font-size: var(--hmm-live-author-size);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.hmm-live-front-time {
	color: var(--hmm-live-time-color);
	font-size: var(--hmm-live-time-size);
	margin-top: 2px;
}

/* ─── Badges ─────────────────────────────────────────────── */
.hmm-live-front-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hmm-live-front-badge-question {
	background: var(--hmm-live-badge-question-bg);
	color: var(--hmm-live-badge-question-text);
}

/* ─── Body ───────────────────────────────────────────────── */
.hmm-live-front-body {
	font-size: var(--hmm-live-content-size);
	line-height: 1.55;
	color: var(--hmm-live-text-color);
}

.hmm-live-front-content p { margin: 0 0 8px; }
.hmm-live-front-content p:last-child { margin-bottom: 0; }

.hmm-live-front-content a {
	color: var(--hmm-live-link-color);
	text-decoration: underline;
}

.hmm-live-front-deleted {
	color: #999;
	font-style: italic;
}

/* ─── Attachements ───────────────────────────────────────── */
.hmm-live-front-quote {
	margin: 12px 0 0;
	padding: 14px 18px;
	background: var(--hmm-live-bg-question);
	border-left: 4px solid var(--hmm-live-border-question);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	font-size: var(--hmm-live-content-size);
}

.hmm-live-front-quote p {
	margin: 0 0 8px;
	color: var(--hmm-live-text-color);
}

.hmm-live-front-quote p::before { content: '« '; }
.hmm-live-front-quote p::after  { content: ' »'; }

.hmm-live-front-quote footer {
	font-size: 13px;
	font-style: normal;
	color: var(--hmm-live-desc-color);
}

.hmm-live-front-quote cite {
	font-style: normal;
	font-weight: 600;
	color: var(--hmm-live-border-question);
}

.hmm-live-front-quote a {
	margin-left: 10px;
	color: var(--hmm-live-link-color);
	font-size: 12px;
}

.hmm-live-front-image {
	margin: 12px 0 0;
	border-radius: 8px;
	overflow: hidden;
}

.hmm-live-front-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
}

.hmm-live-front-image figcaption {
	padding: 8px 12px;
	background: var(--hmm-live-bg-empty);
	font-size: 13px;
	color: var(--hmm-live-desc-color);
	font-style: italic;
}

.hmm-live-front-video {
	margin: 12px 0 0;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.hmm-live-front-video video {
	display: block;
	width: 100%;
	max-height: 500px;
}

.hmm-live-front-iframe-wrapper {
	margin: 12px 0 0;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
}

.hmm-live-front-iframe-wrapper iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hmm-live-front-tweet {
	margin: 12px 0 0;
}

.hmm-live-front-article {
	margin: 12px 0 0;
	display: flex;
	gap: 14px;
	padding: 14px;
	background: var(--hmm-live-bg-empty);
	border: 1px solid var(--hmm-live-border-color);
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.hmm-live-front-article:hover {
	border-color: var(--hmm-live-accent);
	box-shadow: 0 2px 8px rgba(0,0,0, 0.1);
	transform: translateY(-1px);
}

.hmm-live-front-article-thumb {
	flex-shrink: 0;
	width: 100px;
	height: 75px;
	overflow: hidden;
	border-radius: 4px;
}

.hmm-live-front-article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hmm-live-front-article-body {
	flex: 1;
	min-width: 0;
}

.hmm-live-front-article-title {
	font-weight: 700;
	color: var(--hmm-live-link-color);
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 4px;
}

.hmm-live-front-article-excerpt {
	color: var(--hmm-live-desc-color);
	font-size: 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Actions item (like / debate / report) ─────────────── */
.hmm-live-front-item-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--hmm-live-border-color);
}

.hmm-live-front-item-actions button {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 18px;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 13px;
	color: var(--hmm-live-action-color);
	transition: all 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.hmm-live-front-item-actions button:hover {
	background: var(--hmm-live-action-bg-hover);
	border-color: var(--hmm-live-border-color);
	color: var(--hmm-live-action-color-hover);
}

.hmm-live-front-like.is-liked {
	background: var(--hmm-live-like-active-bg);
	border-color: var(--hmm-live-like-active-color);
	color: var(--hmm-live-like-active-color);
}

.hmm-live-front-like.is-liked .hmm-live-front-like-icon {
	transform: scale(1.2);
}

/* ─── Réponses imbriquées ─────────────────────────────────── */
.hmm-live-front-replies {
	margin-top: 14px;
	padding-top: 14px;
	padding-left: 20px;
	border-top: 1px dashed var(--hmm-live-border-color);
	border-left: 2px solid var(--hmm-live-border-reply);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hmm-live-front-replies .hmm-live-front-item {
	background: var(--hmm-live-bg-reply);
	border-color: var(--hmm-live-border-reply);
}

/* ─── Bouton Participer ──────────────────────────────────── */
.hmm-live-front-actions {
	margin-top: 24px;
	padding: 16px;
	background: var(--hmm-live-bg-item);
	border-top: 1px solid var(--hmm-live-border-color);
	border-radius: 0 0 var(--hmm-live-radius-item) var(--hmm-live-radius-item);
	text-align: center;
	position: sticky;
	bottom: 0;
	z-index: 10;
}

.hmm-live-front-participate-btn {
	background: var(--hmm-live-participate-bg);
	color: var(--hmm-live-participate-text);
	border: none;
	border-radius: var(--hmm-live-radius-button);
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.hmm-live-front-participate-btn:hover {
	background: var(--hmm-live-participate-bg-hover);
	transform: translateY(-1px);
}

/* ─── Modals ─────────────────────────────────────────────── */
.hmm-live-front-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.hmm-live-front-modal[hidden] { display: none; }

.hmm-live-front-modal-backdrop {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(2px);
}

.hmm-live-front-modal-content {
	position: relative;
	background: #fff;
	border-radius: var(--hmm-live-radius-modal);
	padding: 24px;
	max-width: 500px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 12px 48px rgba(0,0,0,0.25);
	animation: hmm-live-front-modal-in 0.2s ease-out;
}

@keyframes hmm-live-front-modal-in {
	from { opacity: 0; transform: scale(0.95) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.hmm-live-front-modal-content h3 {
	margin: 0 0 16px;
	font-size: 20px;
	color: var(--hmm-live-title-color);
}

.hmm-live-front-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #999;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hmm-live-front-modal-close:hover {
	background: #f5f5f5;
	color: var(--hmm-live-title-color);
}

.hmm-live-front-modal-content textarea {
	width: 100%;
	border: 1px solid var(--hmm-live-border-color);
	border-radius: 6px;
	padding: 12px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	box-sizing: border-box;
}

.hmm-live-front-modal-content textarea:focus {
	border-color: var(--hmm-live-border-question);
	outline: none;
	box-shadow: 0 0 0 2px rgba(26, 74, 156, 0.1);
}

/* ─── Champ prénom invité ──────────────────────────────── */
.hmm-live-front-guest-row {
	margin-bottom: 16px;
}

.hmm-live-front-guest-row label,
.hmm-live-front-label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: var(--hmm-live-title-color);
	margin-bottom: 6px;
}

.hmm-live-front-required {
	color: var(--hmm-live-accent);
}

.hmm-live-front-guest-row input[type="text"] {
	width: 100%;
	border: 1px solid var(--hmm-live-border-color);
	border-radius: 6px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	box-sizing: border-box;
}

.hmm-live-front-guest-row input[type="text"]:focus {
	border-color: var(--hmm-live-border-question);
	outline: none;
	box-shadow: 0 0 0 2px rgba(26, 74, 156, 0.1);
}

.hmm-live-front-guest-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: #888;
	font-style: italic;
	line-height: 1.4;
}

.hmm-live-front-logged-as {
	margin: 0 0 14px;
	padding: 10px 12px;
	background: #f0f7ff;
	border-left: 3px solid var(--hmm-live-submit-bg);
	border-radius: 0 4px 4px 0;
	color: var(--hmm-live-title-color);
	font-size: 13px;
}

.hmm-live-front-logged-as strong {
	color: var(--hmm-live-submit-bg);
}

.hmm-live-front-logged-as-debate {
	margin: 8px 0;
	padding: 6px 10px;
	font-size: 12px;
}

.hmm-live-front-debate-composer {
	display: flex;
	gap: 8px;
	align-items: stretch;
	flex-wrap: wrap;
}

.hmm-live-front-debate-guest-name {
	flex: 0 0 140px;
	border: 1px solid var(--hmm-live-border-color);
	border-radius: 6px;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 13px;
	box-sizing: border-box;
}

.hmm-live-front-debate-guest-name:focus {
	border-color: var(--hmm-live-border-question);
	outline: none;
}

.hmm-live-front-debate-composer textarea {
	flex: 1;
	min-width: 200px;
}

.hmm-live-front-modal-actions {
	margin-top: 14px;
	display: flex;
	gap: 12px;
	align-items: center;
}

/* ─── Boutons d'action principale (Publier / Envoyer) ─────────
 * Sélecteurs ultra-spécifiques pour vaincre les thèmes lourds
 * ───────────────────────────────────────────────────────────── */
.hmm-live-front-modal .hmm-live-front-modal-content button.hmm-live-front-submit,
.hmm-live-front-modal .hmm-live-front-modal-content button.hmm-live-front-debate-send,
button.hmm-live-front-submit,
button.hmm-live-front-debate-send {
	background: var(--hmm-live-submit-bg) !important;
	background-color: var(--hmm-live-submit-bg) !important;
	background-image: none !important;
	color: var(--hmm-live-submit-text) !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 12px 24px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
	box-shadow: 0 2px 6px rgba(0, 114, 255, 0.3) !important;
	letter-spacing: 0.02em !important;
	text-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	line-height: 1.2 !important;
	display: inline-block !important;
	text-decoration: none !important;
	text-transform: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	height: auto !important;
	width: auto !important;
	font-family: inherit !important;
	-webkit-text-fill-color: var(--hmm-live-submit-text) !important;
	filter: none !important;
}

.hmm-live-front-submit *,
.hmm-live-front-debate-send * {
	color: var(--hmm-live-submit-text) !important;
	-webkit-text-fill-color: var(--hmm-live-submit-text) !important;
}

.hmm-live-front-modal .hmm-live-front-modal-content button.hmm-live-front-submit:hover,
.hmm-live-front-modal .hmm-live-front-modal-content button.hmm-live-front-debate-send:hover,
button.hmm-live-front-submit:hover,
button.hmm-live-front-debate-send:hover {
	background: var(--hmm-live-submit-bg-hover) !important;
	background-color: var(--hmm-live-submit-bg-hover) !important;
	color: var(--hmm-live-submit-text) !important;
	-webkit-text-fill-color: var(--hmm-live-submit-text) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 114, 255, 0.4) !important;
	filter: none !important;
}

button.hmm-live-front-submit:active,
button.hmm-live-front-debate-send:active {
	transform: translateY(0);
}

button.hmm-live-front-submit:disabled,
button.hmm-live-front-debate-send:disabled {
	opacity: 0.6 !important;
	cursor: wait !important;
}

.hmm-live-front-modal-feedback {
	font-size: 13px;
	font-style: italic;
}

.hmm-live-front-modal-feedback.is-success { color: #2e7d32; }
.hmm-live-front-modal-feedback.is-error   { color: #d84315; }

/* ─── Modal Débat ─────────────────────────────────────────── */
.hmm-live-front-modal-debate-content {
	max-width: 600px;
}

.hmm-live-front-debate-context {
	padding: 12px;
	background: var(--hmm-live-bg-empty);
	border-left: 4px solid var(--hmm-live-border-question);
	border-radius: 0 6px 6px 0;
	margin-bottom: 16px;
	font-size: 13px;
	font-style: italic;
	color: var(--hmm-live-desc-color);
}

.hmm-live-front-debate-messages {
	max-height: 400px;
	overflow-y: auto;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.hmm-live-front-debate-message {
	padding: 10px 12px;
	background: var(--hmm-live-bg-empty);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.hmm-live-front-debate-message.is-editor {
	background: #fff5f5;
	border-left: 3px solid var(--hmm-live-accent);
}

.hmm-live-front-debate-message-meta {
	font-size: 11px;
	color: #888;
	margin-bottom: 4px;
}

.hmm-live-front-debate-message-meta strong { color: var(--hmm-live-border-question); }

.hmm-live-front-debate-empty {
	text-align: center;
	padding: 30px;
	color: #999;
	font-style: italic;
}

.hmm-live-front-debate-login-note {
	text-align: center;
	margin: 16px 0 0;
}

.hmm-live-front-debate-login-note a {
	color: var(--hmm-live-link-color);
	font-weight: 600;
}

/* ─── Bloc "Connexion requise" (dans modals quand visiteur dec) */
.hmm-live-front-login-required {
	text-align: center;
	padding: 24px 16px 16px;
}

.hmm-live-front-login-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 16px;
	opacity: 0.85;
}

.hmm-live-front-login-message {
	font-size: 16px;
	color: var(--hmm-live-title-color);
	margin: 0 0 8px;
	line-height: 1.5;
}

.hmm-live-front-login-message-sub {
	font-size: 13px;
	color: #888;
	margin: 0 0 20px;
	font-style: italic;
}

.hmm-live-front-login-link {
	display: inline-block;
	background: var(--hmm-live-submit-bg);
	color: #fff !important;
	padding: 12px 28px;
	border-radius: 6px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	box-shadow: 0 2px 8px rgba(0, 114, 255, 0.25);
}

.hmm-live-front-login-link:hover { filter: brightness(1.1); }

.hmm-live-front-login-debate {
	padding: 20px 16px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
	.hmm-live-front-title { font-size: calc(var(--hmm-live-title-size) * 0.8); }
	.hmm-live-front-item { padding: 12px 14px; }
	.hmm-live-front-replies { padding-left: 12px; }
	.hmm-live-front-article { flex-direction: column; }
	.hmm-live-front-article-thumb { width: 100%; height: 150px; }
}

/* ============================================================
   TEMPLATES VISUELS — variantes structurelles
   Chaque template applique une classe .hmm-live-tpl-* sur le 
   conteneur et surcharge variables et styles spécifiques.
   ============================================================ */

/* ─── TEMPLATE COMPACT — avatars/paddings réduits ──────────── */
.hmm-live-tpl-compact {
	--hmm-live-padding-item: 8px 12px;
	--hmm-live-gap-items: 8px;
	--hmm-live-radius-item: 8px;
	--hmm-live-content-size: 14px;
	--hmm-live-author-size: 13px;
	--hmm-live-time-size: 11px;
	--hmm-live-title-size: 22px;
}

.hmm-live-tpl-compact .hmm-live-front-avatar {
	width: 28px;
	height: 28px;
}

.hmm-live-tpl-compact .hmm-live-front-avatar-default {
	font-size: 12px;
}

.hmm-live-tpl-compact .hmm-live-front-item-header {
	gap: 8px;
	margin-bottom: 8px;
}

.hmm-live-tpl-compact .hmm-live-front-item-actions {
	margin-top: 8px;
	padding-top: 6px;
}

.hmm-live-tpl-compact .hmm-live-front-item-actions button {
	font-size: 12px;
	padding: 2px 8px;
}

.hmm-live-tpl-compact .hmm-live-front-replies {
	margin-top: 10px;
	padding-top: 10px;
	padding-left: 12px;
}

.hmm-live-tpl-compact .hmm-live-front-quote,
.hmm-live-tpl-compact .hmm-live-front-image,
.hmm-live-tpl-compact .hmm-live-front-video,
.hmm-live-tpl-compact .hmm-live-front-iframe-wrapper,
.hmm-live-tpl-compact .hmm-live-front-article {
	margin-top: 8px;
}

.hmm-live-tpl-compact .hmm-live-front-header {
	margin-bottom: 16px;
	padding-bottom: 12px;
}

/* ─── TEMPLATE TIMELINE — fil chronologique ────────────────── */
.hmm-live-tpl-timeline {
	--hmm-live-radius-item: 8px;
}

.hmm-live-tpl-timeline .hmm-live-front-feed {
	position: relative;
	padding-left: 36px;
	padding-right: 8px;
}

/* Trait vertical principal */
.hmm-live-tpl-timeline .hmm-live-front-feed::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--hmm-live-border-color);
	border-radius: 2px;
}

/* Items avec point coloré à gauche */
.hmm-live-tpl-timeline .hmm-live-front-item {
	position: relative;
}

.hmm-live-tpl-timeline .hmm-live-front-item::before {
	content: '';
	position: absolute;
	left: -27px;
	top: 22px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--hmm-live-accent);
	border: 3px solid var(--hmm-live-bg-item);
	box-shadow: 0 0 0 1px var(--hmm-live-accent);
	z-index: 2;
}

/* Point bleu pour les items "question" */
.hmm-live-tpl-timeline .hmm-live-front-item.is-question::before {
	background: var(--hmm-live-border-question);
	box-shadow: 0 0 0 1px var(--hmm-live-border-question);
}

/* Masquer les avatars dans timeline (la pastille les remplace) */
.hmm-live-tpl-timeline .hmm-live-front-avatar {
	display: none;
}

.hmm-live-tpl-timeline .hmm-live-front-item-header {
	gap: 0;
}

.hmm-live-tpl-timeline .hmm-live-front-author-block {
	flex: 1;
}

/* Replies dans timeline : retrait visuel + petits points verts */
.hmm-live-tpl-timeline .hmm-live-front-replies {
	border-left: none;
	padding-left: 24px;
	position: relative;
}

.hmm-live-tpl-timeline .hmm-live-front-replies .hmm-live-front-item::before {
	left: -19px;
	width: 10px;
	height: 10px;
	top: 18px;
	background: var(--hmm-live-border-reply);
	box-shadow: 0 0 0 1px var(--hmm-live-border-reply);
}

/* ─── TEMPLATE MODERN — ombres douces, sans bordure ──────── */
.hmm-live-tpl-modern {
	--hmm-live-radius-item: 16px;
	--hmm-live-radius-button: 12px;
	--hmm-live-radius-modal: 16px;
	--hmm-live-padding-item: 20px 22px;
	--hmm-live-gap-items: 18px;
	--hmm-live-border-width: 0px;
}

.hmm-live-tpl-modern .hmm-live-front-item {
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hmm-live-tpl-modern .hmm-live-front-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.1);
}

.hmm-live-tpl-modern .hmm-live-front-item-actions {
	border-top: 1px solid rgba(0,0,0,0.05);
}

.hmm-live-tpl-modern .hmm-live-front-replies {
	border-left: none;
	border-top: 1px dashed rgba(0,0,0,0.08);
	padding-left: 16px;
	margin-left: 4px;
}

.hmm-live-tpl-modern .hmm-live-front-replies .hmm-live-front-item {
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.04);
}

.hmm-live-tpl-modern .hmm-live-front-participate-btn {
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* ─── RESPONSIVE — tous les templates passent en compact <600px */
@media (max-width: 600px) {
	.hmm-live-front {
		--hmm-live-padding-item: 10px 12px;
		--hmm-live-gap-items: 10px;
		--hmm-live-content-size: 14px;
		--hmm-live-title-size: 20px;
	}

	.hmm-live-front .hmm-live-front-avatar {
		width: 32px;
		height: 32px;
	}

	.hmm-live-front .hmm-live-front-avatar-default {
		font-size: 13px;
	}

	/* Timeline mobile : trait plus court, points plus petits */
	.hmm-live-tpl-timeline .hmm-live-front-feed {
		padding-left: 28px;
	}

	.hmm-live-tpl-timeline .hmm-live-front-feed::before {
		left: 12px;
	}

	.hmm-live-tpl-timeline .hmm-live-front-item::before {
		left: -22px;
		width: 11px;
		height: 11px;
	}
}

/* ============================================================
   MODÉRATION FRONTEND (éditeurs uniquement)
   ============================================================ */

/* ─── Barre de bascule mode modération ─────────────────── */
.hmm-live-front-modbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 0;
	margin: 0 0 12px;
	background: transparent;
	border: 0;
	flex-wrap: wrap;
}

.hmm-live-front-mod-toggle {
	background: transparent;
	color: #1565C0 !important;
	border: 1.5px solid #1565C0;
	border-radius: 6px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s;
	letter-spacing: 0.02em;
}

.hmm-live-front-mod-toggle:hover {
	background: #f0f7ff;
	color: #0d47a1 !important;
	border-color: #0d47a1;
}

/* État activé : bouton passe en vert */
.hmm-live-front.is-mod-active .hmm-live-front-mod-toggle {
	background: transparent;
	color: #2e7d32 !important;
	border-color: #2e7d32;
}

.hmm-live-front.is-mod-active .hmm-live-front-mod-toggle:hover {
	background: #f0f9f0;
	color: #1b5e20 !important;
	border-color: #1b5e20;
}

.hmm-live-front-mod-state {
	font-size: 12px;
	font-weight: 600;
	color: #2e7d32;
}

/* ─── Actions admin sur chaque item ─────────────────────── */

/* Cachées par défaut, visibles uniquement en mode modération */
.hmm-live-front-admin-actions {
	display: none;
	margin-left: auto;
	gap: 6px;
	flex-wrap: wrap;
}

.hmm-live-front.is-mod-active .hmm-live-front-admin-actions {
	display: inline-flex;
}

.hmm-live-front-admin-actions button {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.15s;
}

.hmm-live-front-admin-edit {
	color: #1565C0;
	border-color: #c8d8f4 !important;
}
.hmm-live-front-admin-edit:hover {
	background: #e3f2fd;
	border-color: #1565C0 !important;
}

.hmm-live-front-admin-reply {
	color: #2e7d32;
	border-color: #c8e6c9 !important;
}
.hmm-live-front-admin-reply:hover {
	background: #e8f5e9;
	border-color: #2e7d32 !important;
}

.hmm-live-front-admin-delete {
	color: #c62828;
	border-color: #ffcdd2 !important;
}
.hmm-live-front-admin-delete:hover {
	background: #ffebee;
	border-color: #c62828 !important;
}

/* ─── Édition inline du texte ─────────────────────────── */
.hmm-live-front-edit-zone {
	margin: 8px 0;
}

.hmm-live-front-edit-textarea {
	width: 100%;
	border: 2px solid #1565C0;
	border-radius: 6px;
	padding: 10px;
	font-family: inherit;
	font-size: var(--hmm-live-content-size, 15px);
	resize: vertical;
	box-sizing: border-box;
	min-height: 80px;
}

.hmm-live-front-edit-textarea:focus {
	outline: none;
	border-color: #0d47a1;
	box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

.hmm-live-front-edit-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.hmm-live-front-edit-save {
	background: #2e7d32 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 5px !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hmm-live-front-edit-save:hover {
	background: #256528 !important;
}

.hmm-live-front-edit-save:disabled {
	opacity: 0.6;
	cursor: wait;
}

.hmm-live-front-edit-cancel {
	background: transparent;
	color: #6c757d;
	border: 1px solid #ced4da;
	border-radius: 5px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.hmm-live-front-edit-cancel:hover {
	background: #f8f9fa;
}

/* ─── Mini-composer Réponse ─────────────────────────────── */
.hmm-live-front-reply-composer {
	margin: 12px 0 0;
	padding: 12px;
	background: #e8f5e9;
	border: 2px dashed #66bb6a;
	border-radius: 6px;
}

.hmm-live-front-reply-textarea {
	width: 100%;
	border: 1px solid #c8e6c9;
	border-radius: 5px;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	box-sizing: border-box;
	background: #fff;
}

.hmm-live-front-reply-textarea:focus {
	outline: none;
	border-color: #2e7d32;
}

.hmm-live-front-reply-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.hmm-live-front-reply-send {
	background: #2e7d32 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 5px !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hmm-live-front-reply-send:hover {
	background: #256528 !important;
}

.hmm-live-front-reply-cancel {
	background: transparent;
	color: #6c757d;
	border: 1px solid #ced4da;
	border-radius: 5px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
}

.hmm-live-front-reply-cancel:hover {
	background: #f8f9fa;
}

/* Responsive : actions admin compactes sur mobile */
@media (max-width: 600px) {
	.hmm-live-front-admin-actions button {
		padding: 4px 8px;
		font-size: 11px;
	}
}

/* ============================================================
   COMPOSER RÉDACTION FRONTEND (modal éditeur)
   ============================================================ */

/* Modal plus large que les autres */
.hmm-live-front-modal-composer-content {
	max-width: 720px !important;
	width: 92vw;
	max-height: 88vh;
	overflow-y: auto;
	padding: 24px 28px !important;
}

.hmm-live-front-modal-composer-content h3 {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a2e;
}

/* Bouton "Publier dans le fil" sticky différent du bouton Participer normal */
.hmm-live-front-participate-btn.is-editor-mode {
	background: #2e7d32 !important;
	color: #fff !important;
}
.hmm-live-front-participate-btn.is-editor-mode:hover {
	background: #1b5e20 !important;
}

/* ─── Sélecteur de type (chips/pills) ──────────────────── */
.hmm-live-front-composer-types {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e8eef9;
}

.hmm-live-front-composer-type {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 12px;
	background: #f5f7fa;
	border: 1.5px solid #e0e6ef;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	transition: all 0.15s;
	user-select: none;
}

.hmm-live-front-composer-type:hover {
	background: #eef2f8;
	border-color: #c8d8f4;
}

.hmm-live-front-composer-type input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hmm-live-front-composer-type:has(input:checked),
.hmm-live-front-composer-type.is-checked {
	background: #1565C0;
	border-color: #1565C0;
	color: #fff;
}

/* Fallback pour les navigateurs sans :has() : on ajoutera la classe via JS si besoin */

/* ─── Champs ────────────────────────────────────────────── */
.hmm-live-front-composer-field {
	margin-bottom: 14px;
}

.hmm-live-front-composer-field label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #1a4a9c;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.hmm-live-front-composer-field input[type="text"],
.hmm-live-front-composer-field input[type="url"],
.hmm-live-front-composer-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #c8d8f4;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	color: #2c3e50;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.hmm-live-front-composer-field input[type="text"]:focus,
.hmm-live-front-composer-field input[type="url"]:focus,
.hmm-live-front-composer-field textarea:focus {
	outline: none;
	border-color: #1565C0;
	box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}

.hmm-live-front-composer-field textarea {
	resize: vertical;
	min-height: 70px;
}

.hmm-live-front-composer-hint {
	font-size: 11px;
	color: #8a9bb0;
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	margin-left: 4px;
}

p.hmm-live-front-composer-hint {
	margin: 6px 0 0;
}

/* ─── Ligne médiathèque (bouton + URL côte à côte) ─────── */
.hmm-live-front-composer-media-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin-bottom: 8px;
}

.hmm-live-front-composer-media-btn {
	background: #1565C0 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s;
}

.hmm-live-front-composer-media-btn:hover {
	background: #0d47a1 !important;
}

.hmm-live-front-composer-media-row input[type="url"] {
	flex: 1;
	min-width: 0;
}

.hmm-live-front-composer-media-preview {
	margin-top: 8px;
}

.hmm-live-front-composer-media-preview:empty {
	display: none;
}

/* ─── Autocomplete article ─────────────────────────────── */
.hmm-live-front-composer-article-results {
	margin-top: 4px;
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid #c8d8f4;
	border-radius: 6px;
	background: #fff;
}

.hmm-live-front-composer-article-results:empty {
	display: none;
}

.hmm-live-front-composer-article-item {
	padding: 9px 14px;
	cursor: pointer;
	font-size: 13px;
	color: #2c3e50;
	border-bottom: 1px solid #f0f4ff;
	transition: background 0.1s;
}

.hmm-live-front-composer-article-item:last-child {
	border-bottom: 0;
}

.hmm-live-front-composer-article-item:hover {
	background: #f0f7ff;
	color: #0d47a1;
}

.hmm-live-front-composer-article-empty {
	padding: 12px 14px;
	font-size: 12px;
	color: #8a9bb0;
	font-style: italic;
}

.hmm-live-front-composer-article-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 14px;
	background: #e3f2fd;
	color: #0d47a1;
	border: 1.5px solid #90caf9;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}

.hmm-live-front-composer-article-clear {
	color: #1565C0;
	font-weight: 700;
	text-decoration: none;
	font-size: 14px;
	cursor: pointer;
	padding: 0 4px;
}

.hmm-live-front-composer-article-clear:hover {
	color: #c62828;
}

/* ─── Footer actions du modal composer ─────────────────── */
.hmm-live-front-composer-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e8eef9;
}

.hmm-live-front-composer-actions .hmm-live-front-submit {
	background: #2e7d32 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 11px 22px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background 0.15s;
}

.hmm-live-front-composer-actions .hmm-live-front-submit:hover {
	background: #1b5e20 !important;
}

.hmm-live-front-composer-actions .hmm-live-front-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ─── Responsive mobile ─────────────────────────────────── */
@media (max-width: 640px) {
	.hmm-live-front-modal-composer-content {
		padding: 18px !important;
	}
	.hmm-live-front-composer-types {
		gap: 4px;
	}
	.hmm-live-front-composer-type {
		padding: 6px 10px;
		font-size: 11px;
	}
	.hmm-live-front-composer-media-row {
		flex-direction: column;
	}
	.hmm-live-front-composer-media-btn {
		padding: 10px 16px !important;
	}
}

/* ============================================================
   SECTION ITEMS SIGNALÉS (éditeurs en mode modération)
   ============================================================ */

.hmm-live-front-reported {
	margin: 0 0 16px;
	background: #fff8e1;
	border: 1px solid #f0d666;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.2s;
}

.hmm-live-front-reported[open] {
	background: #fff8e1;
	border-color: #e6b800;
}

/* Header de la section (cliquable pour ouvrir/fermer) */
.hmm-live-front-reported-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background 0.15s;
}

.hmm-live-front-reported-header::-webkit-details-marker {
	display: none;
}

.hmm-live-front-reported-header:hover {
	background: rgba(230, 184, 0, 0.08);
}

.hmm-live-front-reported-title {
	font-size: 13px;
	font-weight: 700;
	color: #6d4c00;
	letter-spacing: 0.01em;
}

.hmm-live-front-reported-count {
	display: inline-block;
	min-width: 22px;
	padding: 1px 7px;
	background: #c62828;
	color: #fff;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	margin-right: 4px;
}

.hmm-live-front-reported-toggle {
	color: #6d4c00;
	font-size: 14px;
	transition: transform 0.2s;
}

.hmm-live-front-reported[open] .hmm-live-front-reported-toggle {
	transform: rotate(180deg);
}

/* Body de la section */
.hmm-live-front-reported-body {
	padding: 8px 16px 14px;
	background: #fffbf0;
	border-top: 1px solid #f0d666;
}

.hmm-live-front-reported-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.hmm-live-front-reported-loading,
.hmm-live-front-reported-empty,
.hmm-live-front-reported-error {
	display: block;
	padding: 14px 8px;
	font-size: 13px;
	font-style: italic;
	color: #8a7440;
	text-align: center;
}

.hmm-live-front-reported-empty {
	color: #2e7d32;
}

.hmm-live-front-reported-error {
	color: #c62828;
	font-style: normal;
	font-weight: 600;
}

/* Item signalé (carte compacte) */
.hmm-live-front-reported-item {
	background: #fff;
	border: 1px solid #f0d666;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 13px;
	transition: all 0.15s;
}

.hmm-live-front-reported-item:hover {
	border-color: #c62828;
	box-shadow: 0 2px 6px rgba(198, 40, 40, 0.1);
}

.hmm-live-front-reported-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 11px;
}

.hmm-live-front-reported-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: #c62828;
	color: #fff;
	border-radius: 12px;
	font-weight: 700;
	font-size: 11px;
}

.hmm-live-front-reported-type {
	font-size: 14px;
}

.hmm-live-front-reported-author {
	color: #6d4c00;
	font-weight: 700;
}

.hmm-live-front-reported-content {
	color: #333;
	line-height: 1.4;
	margin-bottom: 6px;
	word-break: break-word;
}

.hmm-live-front-reported-cta {
	text-align: right;
}

.hmm-live-front-reported-jump {
	color: #1565C0;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s;
}

.hmm-live-front-reported-jump:hover {
	color: #0d47a1;
	text-decoration: underline;
}

/* Footer actions */
.hmm-live-front-reported-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 10px;
	border-top: 1px dashed #e6b800;
}

.hmm-live-front-reported-clear-all,
.hmm-live-front-reported-refresh {
	background: transparent;
	color: #6d4c00 !important;
	border: 1.5px solid #d4a700;
	border-radius: 5px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.hmm-live-front-reported-clear-all:hover,
.hmm-live-front-reported-refresh:hover {
	background: #fff8e1;
	color: #4a3500 !important;
	border-color: #b89000;
}

.hmm-live-front-reported-clear-all:disabled,
.hmm-live-front-reported-refresh:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* La section n'est visible qu'en mode modération */
.hmm-live-front:not(.is-mod-active) .hmm-live-front-reported {
	display: none !important;
}

/* Flash visuel sur l'item ciblé après "Voir dans le fil" */
.hmm-live-front-item.is-flash-highlight {
	animation: hmmFlashHighlight 2s ease-out;
}

@keyframes hmmFlashHighlight {
	0%   { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.6); background: rgba(255, 248, 225, 0.6); }
	30%  { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.5); background: rgba(255, 248, 225, 0.4); }
	100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); background: transparent; }
}

/* Mobile : actions empilées */
@media (max-width: 600px) {
	.hmm-live-front-reported-actions {
		flex-direction: column;
	}
	.hmm-live-front-reported-clear-all,
	.hmm-live-front-reported-refresh {
		width: 100%;
	}
}