/* ==========================================================================
   Client overrides — plain CSS, no build step required.
   Safe to edit: never touched by LESS compilation.
   See docs/20260603-theme-handoff-critical-notes.md for context.
   ========================================================================== */

/* [2026-06-03] Apartments section — slim full-width banner.
   child2 (.container-lg) is hidden; child1 (.content-appart) becomes a flat
   ~150px band in the same coral/peach colour (#f05a30) that the SVG blobs used.
   Re-enable the original look by removing these rules and un-hiding container-lg. */

section.apartments {
	/* Coral band sits flush against the sections above and below — no body-bg gap.
	   !important needed on bottom: the .pb-10 / .lg:pb-7 utilities in framework.css
	   carry !important themselves. Breathing room lives inside .content-appart. */
	padding-top: 0;
	padding-bottom: 0 !important;
}

section.apartments .content-appart {
	/* The LESS-built CSS sets margin-bottom: -200px to pull the (now hidden) price grid up
	   under the blob — with the grid gone it pulled the next section over this band instead. */
	margin-bottom: 0;
	background: #f05a30;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Extra room above the "Les appartements" title, inside the coral */
	padding: 4rem 2rem 3rem;
	width: 100%;
	position: relative;
}

/* Hide the decorative SVG blobs — the flat background colour replaces them */
section.apartments .content-appart .BlocksForme__svg {
	display: none;
}

/* [2026-08-07] "Choisissez votre unité" — same band height/padding/centering as the
   "Les appartements" coral banner above it, but keeps its own white background. */
section.unite-selector {
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem 3rem;
	width: 100%;
}

section.apartments .content-appart .content-appart-text {
	position: static;
	text-align: center;
	max-width: 900px;
}

/* Text was dark-green (text-primary-700) against a light bg — switch to white on coral */
section.apartments .content-appart .content-appart-text h2,
section.apartments .content-appart .content-appart-text p {
	color: #ffffff;
}

/* [2026-06-03] Hero background swap — hides the decorative SVG wave on the right side.
   Revert by removing this rule. The .forme-svg div in front-page.php can stay. */
.hero .forme-svg {
	display: none;
}

/* Dark gradient overlay to maintain text legibility over a bright photo background.
   Sits between the photo (z-index: -20) and the content (z-index: auto).
   Adjust rgba alpha values if the photo changes and contrast needs retuning. */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.35) 100%);
	z-index: -1;
}

/* [2026-07-08] Static campaign image popup.
   Replace assets/images/popup-fr.jpg and popup-en.jpg to update the creative.
   Keep the files at 800x801px or larger; the popup displays them at 720px max for sharper text.
   Change data-show-at-scroll in footer.php to delay opening until a scroll percentage. */
body.bloome-image-popup-is-active {
	overflow: hidden;
}

.bloome-image-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 41, 0, 0.68);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, visibility 180ms ease;

	&.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		.bloome-image-popup__panel {
			transform: translateY(0) scale(1);
		}
	}

	.bloome-image-popup__panel {
		position: relative;
		width: min(720px, 92vw, 84vh);
		border-radius: 22px;
		box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
		transform: translateY(10px) scale(0.98);
		transition: transform 180ms ease;
	}

	.bloome-image-popup__link {
		display: block;
		border-radius: inherit;
		overflow: hidden;
		background: #faf2e5;
	}

	.bloome-image-popup__image {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.bloome-image-popup__close {
		position: absolute;
		top: -14px;
		right: -14px;
		width: 42px;
		height: 42px;
		border: 0;
		border-radius: 50%;
		background: #f05a30;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
		cursor: pointer;

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

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 2px;
			background: #ffffff;
		}

		&::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		&::after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}

	@media (max-width: 640px) {
		padding: 16px;

		.bloome-image-popup__panel {
			width: min(92vw, 520px, 84vh);
			border-radius: 16px;
		}

		.bloome-image-popup__close {
			top: -10px;
			right: -10px;
			width: 38px;
			height: 38px;
		}
	}
}

/* [2026-08-07] "Les inclusions" section (front-page.php) — icon grid, no
   card/box around each item: icon + label sit directly on the section's
   cream background. Custom classes instead of .advantages: that class
   bakes in a fixed 176x176px icon box plus an orange "+" popup indicator
   (::after) meant for cards that open a lightbox — these icons don't open
   anything, so reusing .advantages left a giant empty gap under each icon
   and an orange "+" with no purpose. */
.c-inclusions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 32px;
	margin-top: 24px;
}

.c-inclusions__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.c-inclusions__icon {
	width: 112px;
	height: 112px;
	margin-bottom: 16px;
	transition: transform 0.3s ease;
}

.c-inclusions__item:hover .c-inclusions__icon {
	transform: scale(1.12);
}

.c-inclusions__label {
	margin: 0;
	font-family: roobertregular, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: #002900;
	white-space: nowrap;
}

/* [2026-08-07] container-sm's side padding jumps straight from 80px to a
   fixed 224px above the 1023px breakpoint and stays there all the way up
   to ~1920px — it does NOT scale down again on 1280/1366/1440 laptop
   widths. A plain 4-column grid measured out at only ~123px of usable
   width per column in that range (measured live via canvas.measureText),
   not enough to fit "Internet Haute Vitesse" (~164px at 16px bold)
   without wrapping. This tier absorbs that dead zone with 3 columns
   before the roomy 4-column layout resumes at 1440px+. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.c-inclusions {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 20px;
	}

	.c-inclusions__icon {
		width: 92px;
		height: 92px;
		margin-bottom: 14px;
	}
}

@media (max-width: 1023px) {
	.c-inclusions {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}

	.c-inclusions__icon {
		width: 104px;
		height: 104px;
	}

	.c-inclusions__label {
		white-space: normal;
	}
}

@media (max-width: 767px) {
	.c-inclusions {
		gap: 24px 16px;
	}

	.c-inclusions__icon {
		width: 80px;
		height: 80px;
		margin-bottom: 12px;
	}

	.c-inclusions__label {
		font-size: 14px;
	}
}