/* Frontend - Plans & Prix */
.pi-plans-prix {
	--pi-color-disponible: #a3e291;
	--pi-color-disponible-hover: #9ee18e;
	--pi-color-reserve: #f0eba8;
	--pi-color-vendu: #f98888;
	--pi-color-text: #3a3a3a;
	--pi-color-border: #f5f0e8;
	--pi-color-bg: #f5f0e8;
	--pi-color-bg-alt: #f6f6f6;
	--pi-color-header: #b77336;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--pi-color-text);
	max-width: 100%;
	background: var(--pi-color-bg);
	padding: 1rem 0 2rem;
}

.pi-plans-prix__title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 400;
	margin-bottom: 2rem;
	text-align: center;
	font-family: "DM Serif Display", Georgia, serif;
	color: #2c2c2c;
}

/* Legend */
.pi-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	margin-bottom: 2rem;
	font-size: 0.85rem;
	text-transform: lowercase;
}

.pi-legend__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pi-legend__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.pi-legend__item--disponible .pi-legend__dot { background: var(--pi-color-disponible); }
.pi-legend__item--reserve .pi-legend__dot { background: var(--pi-color-reserve); }
.pi-legend__item--vendu .pi-legend__dot { background: var(--pi-color-vendu); }

/* Table (mode sans façade) */
.pi-table-wrapper {
	overflow-x: auto;
	margin-bottom: 1rem;
}

.pi-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.pi-table:not(.pi-table--units) {
	min-width: 600px;
}

.pi-table th,
.pi-table td {
	padding: 0.65rem 0.4rem;
	text-align: center;
	border-bottom: 1px solid var(--pi-color-border);
	vertical-align: middle;
}

.pi-table thead th {
	font-weight: 500;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666;
	background: var(--pi-color-bg-alt);
}

.pi-status-badge {
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	white-space: nowrap;
}

.pi-status-badge i {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pi-status--disponible .pi-status-badge { color: #4a7a3a; }
.pi-status--disponible .pi-status-badge i { background: var(--pi-color-disponible); }
.pi-status--reserve .pi-status-badge { color: #8a7530; }
.pi-status--reserve .pi-status-badge i { background: var(--pi-color-reserve); }
.pi-status--vendu .pi-status-badge { color: #994444; }
.pi-status--vendu .pi-status-badge i { background: var(--pi-color-vendu); }

.pi-status--vendu { opacity: 0.7; }

.pi-annexe-label {
	font-weight: 500;
	text-align: left !important;
}

/* Actions */
.pi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin: 2.5rem 0 0;
}

.pi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 2rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
	font-family: inherit;
}

.pi-btn--primary {
	background: #2c2c2c;
	color: #fff;
	border-color: #2c2c2c;
}

.pi-btn--primary:hover {
	background: #000;
	color: #fff;
}

.pi-btn--secondary {
	background: transparent;
	color: #2c2c2c;
	border-color: #2c2c2c;
}

.pi-btn--secondary:hover {
	background: #2c2c2c;
	color: #fff;
}

.pi-btn--ghost {
	background: transparent;
	color: #666;
	border-color: #ccc;
}

/* Modal */
.pi-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}

.pi-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.pi-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.pi-modal__content {
	position: relative;
	background: #fff;
	padding: 2rem;
	max-width: 420px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.pi-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #999;
	line-height: 1;
}

.pi-modal__content h3 {
	margin: 0 0 1.5rem;
	font-weight: 400;
	font-size: 1.25rem;
}

.pi-modal__content label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

.pi-modal__content input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ddd;
	margin-bottom: 1rem;
	font-family: inherit;
	font-size: 1rem;
	box-sizing: border-box;
}

.pi-modal__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 0.5rem;
}

.pi-form-error { color: #c0392b; font-size: 0.85rem; }
.pi-form-success { color: #4a7a3a; text-align: center; font-weight: 500; }

/* ===== Façade interactive ===== */
.pi-facade-container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0;
	margin-bottom: 0;
	min-height: 620px;
}

.pi-facade {
	width: 52%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding-right: 1.5rem;
}

.pi-facade__svg-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	padding: 0.5rem 0;
}

.pi-facade__svg-wrap svg,
.pi-facade svg {
	width: 100%;
	max-height: 520px;
	height: auto;
	display: block;
	overflow: visible;
}

.pi-facade svg polygon,
.pi-facade svg path,
.pi-facade svg rect {
	cursor: pointer;
	transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}

.pi-facade svg .grey polygon,
.pi-facade svg .grey path {
	cursor: default;
}

.pi-facade svg .grass,
.pi-facade svg .grass2 {
	cursor: default !important;
}

.pi-facade svg .grass polygon,
.pi-facade svg .grass path,
.pi-facade svg .grass2 polygon,
.pi-facade svg .grass2 path,
.pi-facade svg .grass rect,
.pi-facade svg .grass2 rect {
	fill: var(--pi-facade-grass-fill, #b2ceb6) !important;
	stroke: none;
}

.pi-facade svg .grey polygon,
.pi-facade svg .grey path,
.pi-facade svg .grey rect {
	fill: var(--pi-facade-grey-fill, #c4c4c4) !important;
	stroke: var(--pi-facade-grey-stroke, #707070) !important;
}

.pi-facade g.lot polygon,
.pi-facade g.lot path,
.pi-facade g.lot rect {
	fill: var(--pi-facade-lot-fill, #f2f2f2);
	stroke: var(--pi-facade-lot-stroke, #606060);
}

.pi-facade g.lot.d polygon,
.pi-facade g.lot.d path,
.pi-facade g.lot.d rect,
.pi-facade g.lot.d * {
	fill: var(--pi-facade-disponible-fill, var(--pi-color-disponible)) !important;
	stroke: var(--pi-facade-disponible-stroke, #5a9e4a) !important;
}

.pi-facade g.lot.r polygon,
.pi-facade g.lot.r path,
.pi-facade g.lot.r rect,
.pi-facade g.lot.r * {
	fill: var(--pi-facade-reserve-fill, var(--pi-color-reserve)) !important;
	stroke: var(--pi-facade-reserve-stroke, #c4a832) !important;
}

.pi-facade g.lot.v polygon,
.pi-facade g.lot.v path,
.pi-facade g.lot.v rect,
.pi-facade g.lot.v * {
	fill: var(--pi-facade-vendu-fill, var(--pi-color-vendu)) !important;
	stroke: var(--pi-facade-vendu-stroke, #c44e4e) !important;
}

.pi-facade svg text {
	cursor: default;
	pointer-events: none;
}

/* Sélecteur d'étages */
.pi-floor-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0 0 1rem;
	padding: 0;
}

.pi-floor-nav__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.pi-floor-nav__building {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8a7355;
	margin-right: 0.25rem;
}

.pi-floor-nav__btn {
	appearance: none;
	border: 1px solid #c8bfb0;
	background: #fff;
	color: var(--pi-color-text);
	font: inherit;
	font-size: 0.85rem;
	padding: 0.4rem 0.85rem;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pi-floor-nav__btn:hover,
.pi-floor-nav__btn:focus-visible {
	border-color: var(--pi-color-header);
	color: var(--pi-color-header);
	outline: none;
}

.pi-floor-nav__btn.is-active {
	background: var(--pi-color-header);
	border-color: var(--pi-color-header);
	color: #fff;
}

.pi-facade .floor {
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
	transform-origin: center center;
}

.pi-facade .floor.selected {
	transform: translate(0, 12px);
	z-index: 2;
}

.pi-facade .floor.move {
	transform: translate(90px, -280px);
	opacity: 0.85;
}

.pi-facade svg g.lot {
	cursor: pointer;
	pointer-events: all;
}

.pi-has-facade .pi-floor-cell {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.pi-has-facade .pi-table--units tbody tr.pi-floor-active td {
	background: rgba(183, 115, 54, 0.08) !important;
}

.pi-facade .v.hover *,
.pi-facade .v:hover * {
	fill: var(--pi-facade-vendu-fill, var(--pi-color-vendu)) !important;
	stroke: var(--pi-facade-vendu-stroke, #c44e4e) !important;
	cursor: not-allowed !important;
}

.pi-facade .r.hover *,
.pi-facade .r:hover * {
	fill: var(--pi-facade-reserve-fill, var(--pi-color-reserve)) !important;
	stroke: var(--pi-facade-reserve-stroke, #c4a832) !important;
	cursor: not-allowed !important;
}

.pi-facade .d.hover *,
.pi-facade .d:hover * {
	fill: var(--pi-facade-disponible-hover-fill, var(--pi-color-disponible-hover)) !important;
	stroke: var(--pi-facade-disponible-stroke, #5a9e4a) !important;
	filter: brightness(1.05);
}

.pi-legend--facade {
	margin: 0 0 1rem;
	justify-content: flex-start;
	gap: 2rem;
}

.pi-legend--facade .pi-legend__item {
	flex-direction: column;
	align-items: center;
	width: auto;
	min-width: 80px;
}

.pi-legend--facade p {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: #666;
}

/* Tableau prix (colonne droite) */
.pi-prix {
	width: 48%;
	flex: 1;
	min-width: 0;
	max-height: 680px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: #c4a882 transparent;
	border-left: 1px solid rgba(183, 115, 54, 0.15);
	padding-left: 1rem;
}

.pi-prix::-webkit-scrollbar {
	width: 6px;
}

.pi-prix::-webkit-scrollbar-thumb {
	background: #c4a882;
	border-radius: 3px;
}

.pi-has-facade .pi-table-wrapper {
	overflow: visible;
	margin-bottom: 0;
}

.pi-has-facade .pi-table--units {
	width: 100%;
	table-layout: fixed;
	font-size: 0.72rem;
	border-collapse: collapse;
}

.pi-has-facade .pi-table--units thead {
	position: sticky;
	top: 0;
	z-index: 3;
}

.pi-has-facade .pi-table--units thead th {
	background: var(--pi-color-header);
	color: #f5f0e8;
	border: none;
	border-right: 1px solid rgba(245, 240, 232, 0.25);
	border-bottom: 4px solid var(--pi-color-bg);
	padding: 0.55rem 0.2rem;
	font-size: 0.65rem;
	line-height: 1.3;
	font-weight: 400;
	cursor: default;
	white-space: normal;
}

.pi-has-facade .pi-table--units thead th:last-child {
	border-right: none;
}

.pi-has-facade .pi-table--units td {
	padding: 0.45rem 0.2rem;
	border: none;
	border-bottom: 4px solid var(--pi-color-bg);
	font-size: 0.72rem;
	line-height: 1.35;
}

.pi-has-facade .pi-table--units tbody tr {
	cursor: pointer;
	transition: filter 0.15s ease;
}

.pi-has-facade .pi-table--units tbody tr:nth-child(odd) td {
	background: #f6f6f6;
}

.pi-has-facade .pi-table--units tbody tr:nth-child(even) td {
	background: #eaeaea;
}

.pi-has-facade .pi-table--units tbody tr.hover td {
	outline: 2px solid var(--pi-color-header);
	outline-offset: -2px;
}

.pi-has-facade .pi-table--annexes {
	margin-top: 0;
	font-size: 0.7rem;
}

.pi-has-facade .pi-table--annexes td {
	background: #f0ece4 !important;
	border-bottom: 4px solid var(--pi-color-bg);
	padding: 0.4rem 0.2rem;
}

/* Tooltip */
.pi-tooltip {
	position: fixed;
	z-index: 1000;
	background: #fff;
	border: none;
	padding: 0.75rem 1rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s;
	font-size: 0.8rem;
	border-radius: 4px;
	min-width: 160px;
}

.pi-tooltip.visible {
	opacity: 1;
	visibility: visible;
}

.pi-tooltip__ref {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #2c2c2c;
}

.pi-tooltip__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.15rem 0;
	color: #666;
}

.pi-tooltip__row strong {
	color: #333;
	font-weight: 600;
}

/* Panneau détail lot */
.pi-lot-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 52%;
	max-width: 680px;
	height: 100%;
	z-index: 1001;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.35s ease 0.2s, visibility 0.35s ease 0.2s;
	pointer-events: none;
}

.pi-lot-panel.active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.pi-lot-panel__inner {
	width: 100%;
	height: 100%;
	padding: 3.5rem 2.5rem 2rem;
	background: var(--pi-color-bg);
	box-shadow: 4px 0 40px rgba(0, 0, 0, 0.12);
	transform: translateX(-30px);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
	overflow-y: auto;
}

.pi-lot-panel.active .pi-lot-panel__inner {
	transform: translateX(0);
	opacity: 1;
}

.pi-lot-panel__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	color: #888;
	z-index: 2;
}

.pi-lot-panel__ref {
	margin: 0 0 1.5rem;
	font-size: 2rem;
	font-weight: 400;
	font-family: "DM Serif Display", Georgia, serif;
	color: #2c2c2c;
}

.pi-lot-panel__details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 2rem;
	margin: 0 0 2rem;
}

.pi-lot-panel__details dt {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #999;
	margin-bottom: 0.2rem;
}

.pi-lot-panel__details dd {
	margin: 0;
	font-size: 1.05rem;
	color: #333;
}

.pi-lot-panel__image {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 1.5rem;
	border: 1px solid #ddd;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Mobile */
@media (max-width: 1100px) {
	.pi-facade-container {
		flex-direction: column;
		min-height: auto;
	}

	.pi-facade {
		width: 100%;
		padding-right: 0;
		margin-bottom: 2rem;
	}

	.pi-prix {
		width: 100%;
		max-height: none;
		overflow: visible;
		border-left: none;
		padding-left: 0;
	}

	.pi-lot-panel {
		width: 100%;
		max-width: none;
	}

	.pi-facade .floor.move {
		transform: translate(40px, -120px);
	}

	.pi-facade .floor.selected {
		transform: translate(0, 6px);
	}
}

@media (max-width: 768px) {
	.pi-table:not(.pi-table--units) {
		min-width: 0;
	}

	.pi-table:not(.pi-table--units) thead {
		display: none;
	}

	.pi-table:not(.pi-table--units) tbody tr {
		display: block;
		margin-bottom: 1rem;
		border: 1px solid var(--pi-color-border);
	}

	.pi-has-facade .pi-table--units {
		font-size: 0.65rem;
	}
}