/* NJP Tarifs : tableaux front
 * Sélecteurs préfixés par .njp-tarifs pour passer devant les styles de tableau de Divi
 * (.entry-content table, .entry-content tr td…).
 */
.njp-tarifs {
	--njp-accent: #1d3557;
	--njp-accent-text: #fff;
	--njp-border: rgba(0, 0, 0, .12);
	--njp-zebra: #f6f6f6;
	--njp-muted: rgba(0, 0, 0, .6);
	container: njp / inline-size;
	margin: 1.5em 0;
	font-size: 1rem;
	line-height: 1.4;
	max-width: 100%;
}
.njp-tarifs .njp-tarifs__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--njp-border);
	border-radius: 8px;
	max-width: 100%;
}
.njp-tarifs table.njp-tarifs__table {
	width: 100%;
	margin: 0 !important;
	border-collapse: collapse;
	border: 0 !important;
	background: #fff;
	table-layout: auto;
}
.njp-tarifs .njp-tarifs__table caption {
	caption-side: top;
	padding: .8em 1em;
	text-align: left;
	font-weight: 700;
	font-size: 1.05em;
	background: #fff;
	color: inherit;
}
.njp-tarifs .njp-tarifs__table th,
.njp-tarifs .njp-tarifs__table td {
	padding: .75em 1em !important;
	border: 0 !important;
	border-top: 1px solid var(--njp-border) !important;
	text-align: left;
	vertical-align: middle;
	line-height: 1.35;
}
.njp-tarifs .njp-tarifs__table td,
.njp-tarifs .njp-tarifs__table thead th {
	white-space: nowrap;
}
.njp-tarifs .njp-tarifs__table thead th {
	background: var(--njp-accent);
	color: var(--njp-accent-text);
	font-weight: 700;
	border-top: 0 !important;
}
.njp-tarifs .njp-tarifs__table tbody tr:nth-child(even) {
	background: var(--njp-zebra);
}
.njp-tarifs .njp-tarifs__table tbody th {
	font-weight: 600;
}
.njp-tarifs .njp-tarifs__table td {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.njp-tarifs .njp-tarifs__table td.is-vide {
	font-weight: 400;
	color: var(--njp-muted);
}

/* Grille : prix centrés */
.njp-tarifs--grid .njp-tarifs__table td,
.njp-tarifs--grid .njp-tarifs__table thead th:not(:first-child) {
	text-align: center;
}
/* Neutralise un éventuel position/top/inset imposé aux th par le thème */
.njp-tarifs .njp-tarifs__table th,
.njp-tarifs .njp-tarifs__table td {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	float: none !important;
}
.njp-tarifs .njp-tarifs__table thead th:first-child {
	background: var(--njp-accent) !important;
	color: var(--njp-accent-text) !important;
}
.njp-tarifs .njp-tarifs__table tbody th {
	background: transparent;
	color: #222 !important;
}
/* Mode défilement uniquement : 1re colonne figée */
.njp-tarifs--grid:not(.njp-tarifs--cartes) .njp-tarifs__table tbody th,
.njp-tarifs--grid:not(.njp-tarifs--cartes) .njp-tarifs__table thead th:first-child {
	position: sticky !important;
	left: 0 !important;
	z-index: 1;
}
.njp-tarifs--grid:not(.njp-tarifs--cartes) .njp-tarifs__table tbody th {
	background: #fff;
}
.njp-tarifs--grid:not(.njp-tarifs--cartes) .njp-tarifs__table tbody tr:nth-child(even) th {
	background: var(--njp-zebra);
}

/* Listes (une catégorie ou un volume) : prix à droite */
.njp-tarifs--cat .njp-tarifs__table td,
.njp-tarifs--vol .njp-tarifs__table td,
.njp-tarifs--cat .njp-tarifs__table thead th:last-child,
.njp-tarifs--vol .njp-tarifs__table thead th:last-child {
	text-align: right;
}

.njp-tarifs .njp-tarifs__notes {
	margin-top: .6em;
	font-size: .875em;
	color: var(--njp-muted);
}
.njp-tarifs .njp-tarifs__notes p {
	margin: 0 0 .3em !important;
	padding: 0 !important;
}
.njp-tarifs-erreur {
	padding: .6em 1em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
}

/* ---------- Écran ou colonne étroite ---------- */
@container njp (max-width: 640px) {
	.njp-tarifs .njp-tarifs__table th,
	.njp-tarifs .njp-tarifs__table td {
		padding: .6em .8em !important;
	}
	.njp-tarifs .njp-tarifs__table caption {
		padding: .7em .8em;
	}

	/* Grille → une carte par type de déchets */
	.njp-tarifs--cartes .njp-tarifs__scroll {
		overflow: visible;
		border: 0;
		border-radius: 0;
	}
	.njp-tarifs--cartes table.njp-tarifs__table,
	.njp-tarifs--cartes .njp-tarifs__table tbody,
	.njp-tarifs--cartes .njp-tarifs__table tr,
	.njp-tarifs--cartes .njp-tarifs__table th,
	.njp-tarifs--cartes .njp-tarifs__table td,
	.njp-tarifs--cartes .njp-tarifs__table caption {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.njp-tarifs--cartes table.njp-tarifs__table {
		background: transparent;
	}
	.njp-tarifs--cartes .njp-tarifs__table caption {
		padding: 0 0 .6em;
		background: transparent;
	}
	/* En-tête masqué visuellement, conservé pour les lecteurs d'écran */
	.njp-tarifs--cartes .njp-tarifs__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.njp-tarifs--cartes .njp-tarifs__table tbody tr,
	.njp-tarifs--cartes .njp-tarifs__table tbody tr:nth-child(even) {
		background: #fff;
		border: 1px solid var(--njp-border);
		border-radius: 8px;
		overflow: hidden;
		margin: 0 0 12px;
	}
	.njp-tarifs--cartes .njp-tarifs__table tbody tr th,
	.njp-tarifs--cartes .njp-tarifs__table tbody tr:nth-child(even) th {
		background: var(--njp-accent);
		color: var(--njp-accent-text) !important;
		border-top: 0 !important;
		font-size: 1.05em;
	}
	.njp-tarifs--cartes .njp-tarifs__table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1em;
		text-align: right;
		white-space: normal;
	}
	.njp-tarifs--cartes .njp-tarifs__table td + td {
		border-top: 1px solid var(--njp-border) !important;
	}
	.njp-tarifs--cartes .njp-tarifs__table td::before {
		content: attr(data-label);
		font-weight: 400;
		color: rgba(0, 0, 0, .8);
		text-align: left;
		white-space: nowrap;
	}

	/* Volumes non disponibles masqués dans les cartes */
	.njp-tarifs--cartes.njp-tarifs--sans-vides .njp-tarifs__table td.is-vide {
		display: none;
	}

	/* Listes : libellés longs autorisés à passer à la ligne */
	.njp-tarifs--cat .njp-tarifs__table thead th,
	.njp-tarifs--vol .njp-tarifs__table thead th {
		white-space: normal;
	}
}

/* Listes à deux colonnes : largeur limitée pour garder libellé et prix proches */
.njp-tarifs--cat,
.njp-tarifs--vol {
	max-width: 560px;
}

/* Grille sur grand écran : colonnes de volume de largeur égale */
@container njp (min-width: 641px) {
	.njp-tarifs--grid table.njp-tarifs__table {
		table-layout: fixed;
	}
	.njp-tarifs--grid .njp-tarifs__table thead th:first-child {
		width: 22%;
	}
	.njp-tarifs--grid .njp-tarifs__table td {
		white-space: normal;
	}
}