/* Domus : section tarifs de l'accueil, comparée à Homegate / ImmoScout24 (23/10/2026).
   Module domus-price-compare (shortcode [domus_price_compare], container 0b271ed de la page 2521). */
.dpx {
	--dpx-teal: #1E4D59;
	--dpx-teal-deep: #163A46;
	--dpx-ink: #214847;
	--dpx-muted: #5A7473;
	--dpx-tint: #EEF4F5;
	--dpx-line: rgba(30, 77, 89, 0.12);
	--dpx-amber: #E1A140;
	--dpx-on-teal: #D4E3E5;
	--dpx-on-teal-soft: #B5CCD0;
	--dpx-focus: #4C90A8;
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 100%;
	padding-block: 104px;
	font-family: Inter, system-ui, -apple-system, sans-serif;
	color: var(--dpx-ink);
}
.dpx ::selection { background: var(--dpx-amber); color: var(--dpx-ink); }

/* En-tête sur la bande sarcelle */
.dpx-head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.dpx .dpx-title {
	margin: 0;
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	text-wrap: balance;
}
.dpx .dpx-lede {
	margin: 0;
	max-width: 60ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--dpx-on-teal);
}

/* Les deux offres */
.dpx-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}
.dpx-plan {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
	padding: 40px;
	background: #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(8, 30, 37, 0.28);
}
.dpx-plan-head { display: flex; flex-direction: column; gap: 6px; }
.dpx .dpx-name {
	margin: 0;
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	color: var(--dpx-teal);
}
.dpx .dpx-tag { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dpx-muted); }

/* Prix */
.dpx .dpx-price {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--dpx-line);
	color: var(--dpx-teal);
}
.dpx-cur {
	align-self: flex-start;
	margin-top: 10px;
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
}
.dpx-num {
	margin-left: -8px;
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 104px;
	line-height: 0.86;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.dpx-cap {
	max-width: 16ch;
	padding-bottom: 4px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dpx-ink);
}

/* Tableau comparatif */
.dpx .dpx-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	font-size: 15px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	background: transparent;
}
.dpx .dpx-table th,
.dpx .dpx-table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--dpx-line);
	background: transparent;
	text-align: left;
	vertical-align: middle;
}
.dpx .dpx-table th:first-child { padding-left: 0; width: 34%; }
.dpx .dpx-table thead th {
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dpx-muted);
	border-bottom-color: rgba(30, 77, 89, 0.24);
}
.dpx .dpx-table thead th.dpx-us { color: var(--dpx-teal); border-radius: 6px 6px 0 0; }
.dpx .dpx-table tbody th { font-weight: 500; color: var(--dpx-ink); }
.dpx .dpx-table .dpx-us { background: var(--dpx-tint); color: var(--dpx-teal); font-weight: 700; }
.dpx .dpx-table td.dpx-us { white-space: nowrap; }
.dpx .dpx-table td.dpx-us span { vertical-align: middle; }
.dpx .dpx-table .dpx-them { color: var(--dpx-muted); }
.dpx .dpx-table tbody tr:last-child th,
.dpx .dpx-table tbody tr:last-child td { border-bottom: 0; }
.dpx .dpx-table tbody tr:last-child td.dpx-us { border-radius: 0 0 6px 6px; }
.dpx-ico { flex: none; margin-right: 8px; vertical-align: -3px; color: var(--dpx-teal); }

/* Ligne de total : le coût cumulé ailleurs, en ambre */
.dpx .dpx-table tr.dpx-total th,
.dpx .dpx-table tr.dpx-total td { border-top: 2px solid var(--dpx-teal); padding-top: 16px; padding-bottom: 16px; }
.dpx .dpx-table tr.dpx-total th { font-weight: 700; }
.dpx .dpx-table tr.dpx-total td { font-size: 19px; }
.dpx .dpx-table tr.dpx-total td.dpx-them { font-weight: 700; color: var(--dpx-ink); }
.dpx .dpx-mark {
	padding: 0 3px;
	background: linear-gradient(transparent 38%, rgba(225, 161, 64, 0.55) 38%, rgba(225, 161, 64, 0.55) 96%, transparent 96%);
	color: inherit;
	white-space: nowrap;
}

.dpx .dpx-note { margin: -12px 0 0; font-size: 13px; line-height: 1.5; color: var(--dpx-muted); max-width: 62ch; }

.dpx .dpx-perks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dpx .dpx-perks li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--dpx-ink);
}
.dpx .dpx-perks li::before { content: none; }
.dpx .dpx-perks .dpx-ico { margin-right: 6px; vertical-align: 0; }

/* Boutons */
.dpx a.dpx-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: auto;
	padding: 0 28px;
	border: 2px solid var(--dpx-teal);
	border-radius: 6px;
	font: 600 16px/1.2 Inter, system-ui, sans-serif;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dpx a.dpx-btn--primary { background: var(--dpx-teal); color: #FFFFFF !important; }
.dpx a.dpx-btn--primary:hover { background: var(--dpx-teal-deep); border-color: var(--dpx-teal-deep); }
.dpx a.dpx-btn--secondary { background: #FFFFFF; color: var(--dpx-teal) !important; }
.dpx a.dpx-btn--secondary:hover { background: var(--dpx-tint); }
.dpx a.dpx-btn:focus-visible { outline: 3px solid var(--dpx-focus); outline-offset: 3px; }

.dpx .dpx-source { margin: 0; max-width: 90ch; font-size: 13px; line-height: 1.5; color: var(--dpx-on-teal-soft); }

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

/* Tablette */
@media (max-width: 1100px) {
	.dpx-plan { padding: 32px; }
	.dpx-num { font-size: 88px; }
}
@media (max-width: 900px) {
	.dpx { padding-block: 80px; gap: 40px; }
	.dpx .dpx-title { font-size: 40px; }
	.dpx-plans { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile : le libellé passe au-dessus, les deux valeurs côte à côte */
@media (max-width: 560px) {
	.dpx { padding-block: 64px; gap: 32px; }
	.dpx .dpx-title { font-size: 30px; }
	.dpx .dpx-lede { font-size: 16px; }
	.dpx-plan { padding: 24px 20px; gap: 24px; }
	.dpx-num { font-size: 76px; }
	.dpx-cur { font-size: 18px; margin-top: 6px; }
	.dpx .dpx-table, .dpx .dpx-table thead, .dpx .dpx-table tbody { display: block; }
	.dpx .dpx-table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 0;
	}
	.dpx .dpx-table th:first-child { width: auto; grid-column: 1 / -1; padding: 14px 0 6px; border-bottom: 0; }
	.dpx .dpx-table thead th:first-child { display: none; }
	.dpx .dpx-table th, .dpx .dpx-table td { padding: 10px 12px; font-size: 14px; }
	.dpx .dpx-table td.dpx-us { white-space: normal; border-radius: 6px 0 0 6px; }
	.dpx .dpx-table thead th.dpx-us { border-radius: 6px 0 0 6px; }
	.dpx .dpx-table tbody tr:last-child td.dpx-us { border-radius: 6px 0 0 6px; }
	.dpx .dpx-table tr.dpx-total th { border-top: 2px solid var(--dpx-teal); }
	.dpx .dpx-table tr.dpx-total td { border-top: 0; font-size: 17px; }
	.dpx a.dpx-btn { align-self: stretch; }
}