/*
 * Tribune Breizh Shoutbox aux couleurs de Zeina.
 * Chargé uniquement avec le style Zeina (dossier styles/zeina de l'extension),
 * après les feuilles du style et de Breizh Shoutbox.
 * Couleurs : variables de Zeina (--color-primary, --panel-bg), donc suit le réglage
 * « Couleur du thème » du panneau Zeina.
 */

/* ---------- Carte ---------- */
#all_shout.forabg {
	background: #fff !important;
	border: 1px solid #f3f4f6;
	border-radius: .75rem;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	padding: .5rem;
	margin: .5rem 0 1.25rem;
	color: #374151;
	font-family: inherit;
}
#all_shout .inner { background: transparent; padding: 0; }
#all_shout ul.topiclist { margin: 0; padding: 0; list-style: none; background: transparent; }
#all_shout ul.topiclist > li,
#all_shout li.row { border: 0; }

/* ---------- En-tête : comme les titres de catégorie Zeina ---------- */
#all_shout li.header {
	background: var(--panel-bg) !important;
	background-image: none !important;
	border: 1px solid #f3f4f6;
	border-radius: .5rem;
	padding: 0 1rem;
	min-height: 3rem;
	display: flex;
	align-items: center;
	margin-bottom: .5rem;
}
#all_shout li.header dl.row-item { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 0; background: none; }
#all_shout li.header dt,
#all_shout li.header dd {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	color: #fff;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-transform: none;
}
#all_shout li.header a,
#all_shout li.header .icon { color: #fff !important; }
#all_shout li.header dd.shout-left-dd { font-size: .75rem; font-weight: 500; opacity: .8; }

/* ---------- Barre de saisie ---------- */
#all_shout #shoutbar {
	background: transparent !important;
	background-image: none !important;
	border: 0;
	padding: .25rem .25rem .5rem;
}
#all_shout #shoutdl, #all_shout #post_message { margin: 0; padding: 0 !important; background: none; }
#all_shout #postingBox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
}
#all_shout input#message {
	flex: 1 1 18rem;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	height: 2.5rem;
	padding: .5rem .75rem;
	border: 1px solid #e5e7eb;
	border-radius: .5rem;
	background: #fff;
	color: #111827 !important;
	font-size: .875rem;
	box-shadow: none;
}
#all_shout input#message:focus {
	outline: none;
	border-color: rgb(var(--color-primary));
	box-shadow: 0 0 0 3px rgba(var(--color-primary), .15);
}
#all_shout input#postUser {
	margin: 0 !important;
	height: 2.5rem;
	padding: 0 1rem;
	border: 0;
	border-radius: .5rem !important;
	background: rgb(var(--color-primary)) !important;
	background-image: none !important;
	color: #fff !important;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
}
#all_shout input#postUser:hover { filter: brightness(1.08); }

/* Boutons d'outils (icônes de Breizh) : pastilles discrètes */
/* Les icônes sont des sprites 21×20 : on garde cette zone intacte et on dessine
   la pastille avec la bordure (le sprite n'est peint que dans la zone intérieure). */
#all_shout #postingBox input.button_shout {
	box-sizing: content-box !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 21px !important;
	height: 20px !important;
	border: 6px solid #f9fafb !important;
	border-radius: .5rem;
	background-clip: padding-box;
	background-origin: padding-box;
	box-shadow: 0 0 0 1px #f3f4f6;
	cursor: pointer;
	opacity: .85;
	transition: opacity .15s, border-color .15s, box-shadow .15s;
}
#all_shout #postingBox input.button_shout:hover {
	opacity: 1;
	border-color: #fff !important;
	box-shadow: 0 0 0 1px rgba(var(--color-primary), .35);
}
#all_shout #questionCookies { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; color: #9ca3af; }
#all_shout #questionCookies:hover { color: rgb(var(--color-primary)); background: #f9fafb; }

/* ---------- Messages ---------- */
#all_shout div.shout_message {
	background: #fff !important;
	background-image: none !important;
	border-top: 1px solid #f3f4f6 !important;
	border-bottom: 1px solid #f3f4f6 !important;
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}
#all_shout div.shout_message > li.row {
	display: block;
	margin: 0;
	padding: .45rem .75rem;
	background: #fff !important;
	border-bottom: 1px solid #f9fafb;
	font-size: .875rem;
	line-height: 1.4;
}
#all_shout div.shout_message > li.row:nth-child(even) { background: #fcfcfd !important; }
#all_shout div.shout_message > li.row:hover { background: rgba(var(--color-primary), .04) !important; }

#all_shout div.shout_message > li > dl.dlshout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .5rem;
	row-gap: .125rem;
	margin: 0;
	padding: 0;
	background: none;
}
/* Boutons supprimer / éditer / citer : visibles au survol */
#all_shout div.shout_message > li > dl > dt.dtshoutleft,
#all_shout div.shout_message > li > dl > dt.dtshoutright {
	order: 3;
	display: flex;
	gap: .25rem;
	margin-left: auto;
	width: auto !important;
	padding: 0;
	background: none !important;
	opacity: 0;
	transition: opacity .15s;
}
#all_shout div.shout_message > li.row:hover > dl > dt,
#all_shout div.shout_message > li.row:focus-within > dl > dt { opacity: .7; }
#all_shout div.shout_message > li > dl > dt input { margin: 0 !important; transform: scale(.9); }

/* Méta : heure, avatar, pseudo */
#all_shout div.shout_message > li > dl > dd.ddshout:not(.msgbodyleft):not(.msgbodyright) {
	order: 1;
	flex: 0 0 auto;
	width: auto !important;
	margin: 0;
	padding: 0;
	border: 0;
	color: #9ca3af;
	font-size: 0;              /* masque les séparateurs « ¦ » et « : » (nœuds texte) */
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
}
#all_shout div.shout_message > li > dl > dd.ddshout:not(.msgbodyleft):not(.msgbodyright) > * { font-size: .75rem; }
#all_shout div.shout_message > li > dl > dd.ddshout a.action-user,
#all_shout div.shout_message > li > dl > dd.ddshout .username,
#all_shout div.shout_message > li > dl > dd.ddshout .username-coloured {
	font-size: .8125rem;
	font-weight: 600;
}
#all_shout div.shout_message > li > dl > dd.ddshout .username { color: #111827; }
#all_shout span.avatar-shout { display: inline-flex; vertical-align: middle; }
#all_shout span.avatar-shout > img,
#all_shout span.avatar-shout > img.avatar {
	width: 20px !important;
	height: 20px !important;
	max-width: none;
	border-radius: 9999px;
	object-fit: cover;
	vertical-align: middle;
}

/* Texte du message */
#all_shout div.shout_message > li > dl > dd.msgbodyleft,
#all_shout div.shout_message > li > dl > dd.msgbodyright {
	order: 2;
	flex: 1 1 16rem;
	min-width: 0;
	width: auto !important;
	margin: 0;
	padding: 0;
	border: 0;
	color: #374151;
	font-size: .875rem;
	overflow-wrap: anywhere;
}
#all_shout span.msg_shout img.smilies { vertical-align: middle; max-height: 1.5em; width: auto; }
#all_shout span.msg_shout a { color: rgb(var(--color-primary)); }
#all_shout span.msg_shout blockquote { margin: .25rem 0; }

/* ---------- Pagination ---------- */
#all_shout #divnr, #all_shout #ulnr { background: none; margin: 0 !important; border: 0 !important; }
#all_shout #shoutbox, #all_shout #base_ul { border: 0 !important; }
#all_shout #linr {
	background: transparent !important;
	background-image: none !important;
	border: 0;
	padding: .5rem .25rem 0 !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .8125rem;
}
#all_shout span.shout-pagin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: #9ca3af; }
#all_shout span.shout-pagin .page-sep { display: none; }
#all_shout span.shout-pagin a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 .5rem;
	border: 1px solid #f3f4f6;
	border-radius: .375rem;
	background: #fff;
	color: #4b5563 !important;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
#all_shout span.shout-pagin a:hover { border-color: rgba(var(--color-primary), .35); color: rgb(var(--color-primary)) !important; }
#all_shout span.shout-pagin a.pagin_red,
#all_shout span.pagin_red {
	background: rgb(var(--color-primary)) !important;
	border-color: rgb(var(--color-primary));
	color: #fff !important;
}

/* ---------- Panneaux (smileys, couleurs, bbcodes, connectés, actions…) ---------- */
#all_shout #smilies_ul,
#all_shout #colour_shoutbox,
#all_shout #shout_bbcode,
#all_shout #shout_chars,
#all_shout #shout_online,
#all_shout #user_action,
#all_shout #shout_rules {
	background: #f9fafb;
	border-radius: .5rem;
}
#all_shout #smilies_ul > li,
#all_shout #colour_shoutbox > li,
#all_shout #shout_bbcode > li,
#all_shout #shout_online > li,
#all_shout #user_action > li { padding: .5rem .75rem; background: transparent; }
#all_shout hr.dotted { border-color: #e5e7eb; }
#all_shout input.shout-text-user,
#all_shout input.input-text-edit {
	border: 1px solid #e5e7eb;
	border-radius: .375rem;
	padding: .25rem .5rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	#all_shout.forabg { padding: .375rem; border-radius: .625rem; }
	#all_shout li.header dd.shout-left-dd { display: none; }
	#all_shout input#message { flex: 1 1 100% !important; max-width: none !important; order: -2; }
	#all_shout input#postUser { order: -1; flex: 1 1 100%; }
	#all_shout #postingBox input.button_shout { width: 2.25rem; height: 2.25rem; }
	#all_shout div.shout_message > li.row { padding: .5rem; }
	#all_shout div.shout_message > li > dl > dd.msgbodyleft,
	#all_shout div.shout_message > li > dl > dd.msgbodyright { flex-basis: 100%; }
	/* pas de survol sur écran tactile : boutons toujours visibles, discrets */
	#all_shout div.shout_message > li > dl > dt.dtshoutleft,
	#all_shout div.shout_message > li > dl > dt.dtshoutright { opacity: .45; order: 2; margin-left: auto; }
	#all_shout div.shout_message > li > dl > dd.msgbodyleft,
	#all_shout div.shout_message > li > dl > dd.msgbodyright { order: 3; }
}