/*
 * Pricing Matrix – front-end styles.
 *
 * Every visual is a custom property, so a site can restyle without touching this file:
 *   .pmx { --pmx-price: #e5ab35; --pmx-radius: 0; }
 * Per-tier colours are set inline as --pmx-tier / --pmx-tier-text.
 *
 * Layout switches on the width of the matrix's own container (not the viewport),
 * so it behaves inside narrow page-builder columns too.
 */

.pmx {
	/* Defaults (overridden inline from the Design panel). */
	--pmx-text: #1f1f24;
	--pmx-muted: #55555f;
	--pmx-border: #dcdce2;
	--pmx-bg: #fff;
	--pmx-price: #1f1f24;
	--pmx-price-size: 3rem;
	--pmx-check: #17a34a;
	--pmx-cross: #c62828;
	--pmx-stripe-a: #f6f6f8;
	--pmx-stripe-b: #ececf0;
	--pmx-label-a: #f1eef6;
	--pmx-label-b: #e6e0ef;
	--pmx-label-text: #1f1f24;
	--pmx-btn-text: #fff;
	--pmx-radius: 8px;
	--pmx-btn-radius: 999px;
	--pmx-gap: 4px;
	--pmx-heading-case: uppercase;
	--pmx-heading-spacing: 0.12em;
	--pmx-label-width: minmax(170px, 1.15fr);
	--pmx-icon-size: 1.25em;
	--pmx-tagline-size: 1rem;
	--pmx-text-size: 0.9rem;
	--pmx-note-size: 0.75rem;
	--pmx-btn-size: 0.875rem;
	--pmx-cell-pad: 0.5rem 0.875rem;
	/* 1% of a column's width; lets headings, prices and buttons shrink in narrow columns. */
	--pmx-u: 1cqi;

	container: pmx / inline-size;
	/* Containment makes the natural width 0; page builders that size the matrix to its natural
	   width (Elementor flex containers) then reserve the height of squeezed cards. */
	contain-intrinsic-inline-size: 100vw;
	color: var(--pmx-text);
	font-family: var(--pmx-font, inherit);
	line-height: 1.4;
}

.pmx *,
.pmx *::before,
.pmx *::after {
	box-sizing: border-box;
}

.pmx .pmx-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Narrow (default): stacked cards ---------- */

.pmx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1.5rem;
}

.pmx-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--pmx-bg);
	border: 1px solid var(--pmx-border);
	border-radius: var(--pmx-radius);
	overflow: hidden;
	container-type: inline-size;
}

.pmx-col--labels {
	order: 99;
}

.pmx--sidebar-first .pmx-col--labels {
	order: -1;
}

.pmx-col--labels:not(.has-sidebar),
.pmx-labels,
.pmx-foot {
	display: none;
}

.pmx .pmx-cell {
	min-width: 0;
	margin: 0;
	padding: var(--pmx-cell-pad);
	text-align: center;
}

.pmx .pmx-head {
	position: relative;
	padding: 1rem 0.5rem;
	background: var(--pmx-tier, #333);
	color: var(--pmx-tier-text, #fff);
	font-family: var(--pmx-font-heading, var(--pmx-font, inherit));
	font-size: min(1.125rem, calc(10 * var(--pmx-u)));
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
	text-transform: var(--pmx-heading-case);
	letter-spacing: var(--pmx-heading-spacing);
}

.pmx-badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--pmx-tier-text, #fff);
	color: var(--pmx-tier, #333);
	font-size: 0.65em;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

/* Left-column groups: headings look like plan taglines, text like plan descriptions. */
.pmx .pmx-tagline,
.pmx .pmx-sidebar-heading {
	color: var(--pmx-text);
	font-family: var(--pmx-font, inherit);
	font-size: var(--pmx-tagline-size);
	font-weight: 700;
	line-height: 1.3;
}

.pmx .pmx-tagline {
	padding-top: 1.25rem;
}

.pmx .pmx-price {
	font-family: var(--pmx-font-heading, var(--pmx-font, inherit));
	color: var(--pmx-price);
	font-size: min(var(--pmx-price-size), calc(24 * var(--pmx-u)));
	font-weight: 700;
	line-height: 1.1;
}

.pmx .pmx-price:empty {
	padding: 0;
}

.pmx-price__suffix {
	font-size: 0.6em;
	vertical-align: super;
}

.pmx .pmx-desc,
.pmx .pmx-sidebar-text {
	color: var(--pmx-muted);
	font-size: var(--pmx-text-size);
}

.pmx .pmx-desc {
	padding-bottom: 1rem;
}

.pmx .pmx-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmx .pmx-feature {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	text-align: left;
	font-size: var(--pmx-text-size);
}

.pmx .pmx-feature.pmx-odd {
	background: var(--pmx-stripe-a);
}

.pmx .pmx-feature.pmx-even {
	background: var(--pmx-stripe-b);
}

.pmx--mobile-hide-no .pmx-feature.is-no {
	display: none;
}

.pmx-feature__value {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.pmx-icon {
	display: block;
	width: var(--pmx-icon-size);
	height: var(--pmx-icon-size);
}

.is-yes .pmx-icon {
	color: var(--pmx-check);
}

.is-no .pmx-icon {
	color: var(--pmx-cross);
}

.pmx--icon-outline .pmx-icon circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.pmx--icon-plain .pmx-icon circle {
	display: none;
}

.pmx--icon-outline .pmx-icon path,
.pmx--icon-plain .pmx-icon path {
	stroke: currentColor;
}

.pmx--icon-plain .pmx-icon path {
	stroke-width: 3;
}

.pmx-feature__text {
	font-weight: 600;
	font-size: 0.95em;
}

.pmx .pmx-cta {
	padding-top: 1.25rem;
	margin-top: auto;
}

.pmx .pmx-btn,
.pmx .pmx-btn:visited {
	display: inline-block;
	max-width: 100%;
	padding: 0.7em 1.2em;
	border: 2px solid var(--pmx-tier, #333);
	border-radius: var(--pmx-btn-radius);
	background: var(--pmx-tier, #333);
	color: var(--pmx-btn-text);
	font-family: var(--pmx-font-heading, var(--pmx-font, inherit));
	font-weight: 700;
	font-size: min(var(--pmx-btn-size), calc(9 * var(--pmx-u)));
	letter-spacing: 0.04em;
	text-transform: var(--pmx-heading-case);
	text-decoration: none;
	line-height: 1.2;
	/* Long labels (e.g. "Acheter des billets") wrap inside narrow columns, even if the theme sets button { white-space: nowrap }. */
	white-space: normal;
	overflow-wrap: break-word;
	text-wrap: balance;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pmx .pmx-btn:hover,
.pmx .pmx-btn:focus-visible {
	color: var(--pmx-btn-text);
}

/* Hover effects (Design → Button hover effect). Focus gets the same look for keyboard users. */
.pmx--hover-lift .pmx-btn:is(:hover, :focus-visible) {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

.pmx--hover-shadow .pmx-btn:is(:hover, :focus-visible) {
	box-shadow: 0 6px 16px rgb(0 0 0 / 0.25);
	transform: translateY(-2px);
}

.pmx--hover-grow .pmx-btn:is(:hover, :focus-visible) {
	transform: scale(1.06);
}

.pmx--hover-darken .pmx-btn:is(:hover, :focus-visible) {
	filter: brightness(0.85);
}

.pmx--hover-invert .pmx-btn:is(:hover, :focus-visible) {
	background: transparent;
	color: var(--pmx-tier, #333);
}

.pmx .pmx-btn:focus-visible {
	outline: 2px solid var(--pmx-tier, #333);
	outline-offset: 3px;
}

.pmx--btn-outline .pmx-btn,
.pmx--btn-outline .pmx-btn:visited,
.pmx--btn-outline .pmx-btn:hover {
	background: transparent;
	color: var(--pmx-tier, #333);
}

.pmx--btn-outline.pmx--hover-invert .pmx-btn:is(:hover, :focus-visible) {
	background: var(--pmx-tier, #333);
	color: var(--pmx-btn-text);
}

@media (prefers-reduced-motion: reduce) {
	.pmx .pmx-btn {
		transition: none;
	}

	.pmx .pmx-btn:is(:hover, :focus-visible) {
		transform: none;
	}
}

.pmx .pmx-note {
	color: var(--pmx-muted);
	font-size: var(--pmx-note-size);
	padding-bottom: 1rem;
}

.pmx .pmx-sidebar-body {
	padding: 1rem;
}

.pmx .pmx-sidebar-body > :first-child {
	margin-top: 0;
}

.pmx .pmx-sidebar-body > :last-child {
	margin-bottom: 0;
}

.pmx .pmx-sidebar-heading {
	margin: 0.75rem 0 0.25rem;
}

.pmx .pmx-sidebar-text {
	margin: 0 0 0.5rem;
}

/* ---------- Wide: comparison table ---------- */

@supports (grid-template-rows: subgrid) {
	@container pmx (min-width: 760px) {
		.pmx-grid {
			grid-template-columns: var(--pmx-label-width) repeat(var(--pmx-cols), minmax(0, 1fr));
			grid-template-rows: repeat(4, auto) repeat(var(--pmx-features), auto) auto auto;
			column-gap: var(--pmx-gap);
			row-gap: 0;
			/* Columns can't be containers here (containment disables subgrid), so derive
			   a column's width from the whole matrix instead. */
			--pmx-u: calc(1cqi / (var(--pmx-cols) + 1.2));
		}

		.pmx--no-features .pmx-grid {
			grid-template-rows: repeat(6, auto);
		}

		.pmx-col,
		.pmx-col--labels:not(.has-sidebar) {
			display: grid;
			grid-row: 1 / -1;
			grid-template-rows: subgrid;
			container-type: normal;
			order: 0;
			border: 0;
			border-radius: 0;
			overflow: visible;
		}

		.pmx--sidebar-first .pmx-col--labels {
			order: 0;
		}

		.pmx-col--labels:not(.has-sidebar) {
			background: transparent;
		}

		.pmx .pmx-rows {
			display: grid;
			grid-row: span var(--pmx-features);
			grid-template-rows: subgrid;
		}

		.pmx .pmx-head {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			border-radius: var(--pmx-radius) var(--pmx-radius) 0 0;
		}

		.pmx .pmx-head--empty {
			background: transparent;
		}

		.pmx-tier > .pmx-cell:not(.pmx-head),
		.pmx .pmx-sidebar-body {
			border-inline: 1px solid var(--pmx-border);
		}

		.pmx .pmx-price {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.pmx .pmx-sidebar-body {
			grid-row: span 3;
		}

		/* Rows stretch to the tallest cell; centre the shorter ones (no effect in browsers before 2024). */
		.pmx .pmx-tagline,
		.pmx .pmx-desc,
		.pmx .pmx-sidebar-body {
			align-content: center;
		}

		.pmx .pmx-sidebar-body--empty {
			border: 0;
		}

		.pmx .pmx-foot {
			display: block;
			grid-row: span 2;
			padding: 0;
		}

		.pmx .pmx-cta {
			margin-top: 0;
		}

		.pmx .pmx-note {
			border-bottom: 1px solid var(--pmx-border);
			border-radius: 0 0 var(--pmx-radius) var(--pmx-radius);
		}

		.pmx .pmx-feature {
			justify-content: center;
			text-align: center;
		}

		/* Labels live in their own column on wide screens; keep them for screen readers. */
		.pmx .pmx-feature__label {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}

		.pmx .pmx-label {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text-align: right;
			font-size: var(--pmx-text-size);
			font-weight: 500;
			color: var(--pmx-label-text);
		}

		.pmx .pmx-label.pmx-odd {
			background: var(--pmx-label-a);
		}

		.pmx .pmx-label.pmx-even {
			background: var(--pmx-label-b);
		}

		.pmx--mobile-hide-no .pmx-feature.is-no {
			display: flex;
		}
	}
}