/* ============================================================
   Page Nos tarifs — Les Vétos Parisiens
   ============================================================ */

/* ---------- Tarifs par famille ---------- */
.tarifs-table {
	padding: var(--s-96) var(--gutter) var(--s-64);
	background-color: #f7f1e8;
}
.tarifs-table__title {
	padding-bottom: var(--s-48);
	font-size: clamp(26px, 2.6vw, 34px);
	letter-spacing: -0.015em;
	line-height: 1.1;
}
.tarifs-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-24);
}
.tarifs-column {
	padding: var(--s-32);
	border: 1px solid var(--hairline);
}
.tarifs-column h3 {
	margin-bottom: var(--s-24);
	font-family: var(--font-display);
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1.1;
}
.tarifs-column li {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--s-16);
	padding: var(--s-16) 0 var(--s-16) var(--s-24);
	border-top: 1px solid var(--hairline);
}
.tarifs-column li::before {
	content: "+";
	position: absolute;
	left: 0;
	color: #2e7d4f;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}
.tarifs-column strong {
	font-size: 14px;
	white-space: nowrap;
}

/* ---------- Note + image ---------- */
.tarifs-note {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(var(--s-32), 5vw, var(--s-64));
	align-items: center;
	padding: var(--s-64) var(--gutter) var(--s-128);
	border-top: 1px solid var(--hairline);
}
.tarifs-note__text p {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.45;
	letter-spacing: 0;
	max-width: 38ch;
}
.tarifs-note__figure {
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow);
	max-width: 480px;
	margin-left: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.tarifs-table {
		padding-block: var(--s-64) var(--s-32);
	}
	.tarifs-columns {
		grid-template-columns: 1fr;
	}
	.tarifs-note {
		grid-template-columns: 1fr;
		row-gap: var(--s-48);
		padding-block: var(--s-48) var(--s-96);
	}
	.tarifs-note__figure {
		margin-left: 0;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.tarifs-column {
		padding: var(--s-24);
	}
	.tarifs-column li {
		flex-direction: column;
		gap: var(--s-8);
	}
}