/* ============================================================
   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-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
}
.tarifs-row {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: var(--s-24);
	align-items: center;
	/* Liste dense : 11 lignes doivent se parcourir sans dérouler à l'infini. */
	min-height: 68px;
	padding: var(--s-12) 0;
	border-bottom: 1px solid var(--hairline);
}
.tarifs-row__num {
	color: #678071;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.tarifs-row__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 500;
	line-height: 1.08;
}
.tarifs-row__price {
	margin: 0;
	font-weight: 700;
	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-row {
		grid-template-columns: 36px minmax(0, 1fr) auto;
		gap: var(--s-16);
		min-height: 60px;
	}
	.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-row {
		grid-template-columns: 28px minmax(0, 1fr);
		align-items: start;
		/* Le prix passe sous le nom : un interligne, pas une gouttière. */
		row-gap: 2px;
	}
	.tarifs-row__num {
		padding-top: 5px;
	}
	.tarifs-row__price {
		grid-column: 2;
		white-space: normal;
	}
}