/* =========================================================
   PAGINATION (theme-aware)
========================================================= */

.paginate {
	font: 13px Tahoma, Arial, Helvetica, sans-serif;
	margin: 10px auto;
	display: block;
}

/* Palette pagination */
:root {
	--pg-link: #0d6efd;
	--pg-link-hover: #0a58ca;

	--pg-bg: transparent;
	--pg-item-bg: var(--surface);
	--pg-item-border: var(--border-color);

	--pg-active-bg: #0d6efd;
	--pg-active-border: #0d6efd;
	--pg-active-text: #fff;

	--pg-hover-bg: var(--surface-2);
	--pg-hover-border: var(--border-color);

	--pg-dot: var(--pg-link);
}

/* Dark overrides */
:root[data-theme="dark"] {
	--pg-link: rgba(255, 255, 255, 0.86);
	--pg-link-hover: rgba(255, 255, 255, 0.96);

	--pg-item-bg: rgba(255, 255, 255, 0.06);
	--pg-item-border: rgba(255, 255, 255, 0.14);

	--pg-active-bg: rgba(255, 255, 255, 0.18);
	--pg-active-border: rgba(255, 255, 255, 0.22);
	--pg-active-text: rgba(255, 255, 255, 0.95);

	--pg-hover-bg: rgba(255, 255, 255, 0.10);
	--pg-hover-border: rgba(255, 255, 255, 0.18);

	--pg-dot: rgba(255, 255, 255, 0.70);
}

.paginate .point {
	color: var(--pg-dot);
	margin-right: 6px;
	padding: 2px 2px 4px 2px;
}

.paginate .actif {
	color: var(--pg-active-text);
	background-color: var(--pg-active-bg);
	border: 1px solid var(--pg-active-border);
	margin-right: 6px;
	padding: 6px 10px;
	text-decoration: none;
	border-radius: 10px;
}

.paginate a {
	color: var(--pg-link);
	background-color: var(--pg-item-bg);
	border: 1px solid var(--pg-item-border);
	margin-right: 6px;
	padding: 6px 10px;
	text-decoration: none;
	border-radius: 10px;
	display: inline-block;
	line-height: 1;
	transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.paginate a:hover {
	color: var(--pg-link-hover);
	background-color: var(--pg-hover-bg);
	border-color: var(--pg-hover-border);
}

:root[data-theme="dark"] .paginate a:hover {
	color: var(--pg-link-hover);
}

.clear {
	clear: both;
}