/*
 * CSM Immobilier: charter styles.
 *
 * 1. Fonts and tokens     5. Home page
 * 2. Base                 6. Property listing (list and map)
 * 3. Components           7. Property page
 * 4. Header and footer    8. Maps
 *                         9. Error page (404)
 *
 * Breakpoints follow the charter: tablet up to 1024px, mobile up to 767px.
 */

/* 1. Fonts and tokens
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--csm-yellow: #f5e11b;
	--csm-yellow-hover: #fceb5c;
	--csm-ink: #1a1a18;
	--csm-ink-2: #3a3a36;
	--csm-text-2: #2c2b28;
	--csm-muted: #64625c;
	--csm-paper: #faf8f3;
	--csm-white: #fff;
	--csm-field: #d6d2c6;
	--csm-line: #e6e3da;
	--csm-sand: #efede6;
	--csm-select: #fcf6c6;
	--csm-on-dark-muted: #cfccc3;

	--csm-radius: 6px;
	--csm-radius-card: 10px;
	--csm-container: 1280px;
	--csm-gutter: clamp(16px, 2.5vw, 32px);
	--csm-font: "Archivo", system-ui, sans-serif;
	--csm-placeholder: repeating-linear-gradient(135deg, #efede6 0 8px, #f6f4ee 8px 16px);
}

/* 2. Base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--csm-paper);
	color: var(--csm-ink);
	font-family: var(--csm-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-weight: 800;
	font-stretch: 85%;
	line-height: 1.1;
	text-wrap: balance;
}

h1 {
	font-size: clamp(40px, 5.4vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

h3 {
	font-size: clamp(22px, 2vw, 26px);
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--csm-ink);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--csm-ink-2);
}

img,
video {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
}

:focus-visible {
	outline: 2px solid var(--csm-ink);
	outline-offset: 2px;
}

[hidden] {
	display: none !important;
}

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

.skip-link:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip-path: none;
	border-radius: var(--csm-radius);
	background: var(--csm-ink);
	color: var(--csm-white);
}

/* Pages and posts rendered by the parent theme templates, when not laid out in Elementor. */
body:not(.elementor-page) .site-main {
	padding-block: clamp(32px, 4vw, 64px);
}

/* 3. Components
   -------------------------------------------------------------------------- */

/* Buttons: ink for the main action, outline for the secondary one, yellow for phone calls only.
   The colour rules name both classes: on pages built with Elementor, its Site Settings
   (".elementor-kit-N a", loaded after this file) would otherwise recolour the text. */

.csm-btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--csm-radius);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.csm-btn.csm-btn--primary {
	border-color: var(--csm-ink);
	background: var(--csm-ink);
	color: var(--csm-white);
}

.csm-btn.csm-btn--primary:hover {
	border-color: var(--csm-ink-2);
	background: var(--csm-ink-2);
	color: var(--csm-white);
}

.csm-btn.csm-btn--outline {
	border-color: var(--csm-ink);
	background: transparent;
	color: var(--csm-ink);
}

.csm-btn.csm-btn--outline:hover {
	background: var(--csm-sand);
	color: var(--csm-ink);
}

.csm-btn.csm-btn--call {
	border: 2px solid var(--csm-ink);
	background: var(--csm-yellow);
	color: var(--csm-ink);
	font-weight: 700;
}

.csm-btn.csm-btn--call:hover {
	background: var(--csm-yellow-hover);
	color: var(--csm-ink);
}

.csm-btn--small {
	min-height: 36px;
	padding: 7px 12px;
	font-size: 14px;
}

.csm-btn--block {
	width: 100%;
	min-height: 52px;
	font-size: 16px;
}

.csm-link {
	font-size: 15px;
	font-weight: 600;
	text-underline-offset: 4px;
}

/* Badges */

.csm-badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csm-badge--vente,
.csm-badge--accent {
	background: var(--csm-yellow);
	color: var(--csm-ink);
}

.csm-badge--location {
	background: var(--csm-ink);
	color: var(--csm-white);
}

.csm-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.csm-eyebrow--muted {
	color: var(--csm-muted);
	letter-spacing: 0.1em;
}

/* Sections and card grids */

.csm-section {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: var(--csm-container);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 96px) var(--csm-gutter) 0;
}

.csm-section:last-child {
	padding-bottom: clamp(56px, 7vw, 112px);
}

.csm-section__head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
}

.csm-section__title {
	margin: 0;
}

.csm-section__title--small {
	font-size: clamp(28px, 3vw, 40px);
}

.csm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 24px;
}

/* Exactly four cards per row, so that four items never end in a row of three plus one. */
.csm-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.csm-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.csm-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Property card */

.csm-card {
	display: flex;
}

.csm-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--csm-line);
	border-radius: var(--csm-radius-card);
	background: var(--csm-white);
	color: var(--csm-ink);
	text-decoration: none;
}

.csm-card__link:hover {
	border-color: var(--csm-ink);
	color: var(--csm-ink);
}

.csm-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--csm-placeholder);
}

/* Out of the flow, so that a portrait photo cannot stretch its 4:3 frame. */
.csm-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csm-card__media .csm-badge {
	position: absolute;
	top: 12px;
	left: 12px;
}

.csm-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

.csm-card__body p {
	margin: 0;
}

.csm-card__place {
	color: var(--csm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csm-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	font-stretch: 92%;
	line-height: 1.25;
	letter-spacing: 0;
	text-wrap: pretty;
}

.csm-card__specs {
	color: var(--csm-muted);
	font-size: 14px;
}

.csm-card__footer {
	display: flex;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	margin-top: auto !important;
	padding-top: 12px;
	border-top: 1px solid var(--csm-line);
}

.csm-card__price {
	font-size: 20px;
	font-weight: 800;
}

.csm-card__date {
	color: var(--csm-muted);
	font-size: 13px;
}

/* Post card: same frame, an excerpt instead of the specs and a reading prompt instead of the price. */

.csm-card__excerpt {
	color: var(--csm-muted);
	font-size: 14px;
}

.csm-card__more {
	font-size: 15px;
	font-weight: 600;
}

/* Map preview card: the property selected on a map */

.csm-preview {
	position: absolute;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 1000;
	display: grid;
	grid-template-columns: 136px 1fr;
	max-width: 420px;
	overflow: hidden;
	border-radius: var(--csm-radius-card);
	background: var(--csm-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	color: var(--csm-ink);
	text-decoration: none;
}

.csm-preview__media {
	position: relative;
	min-height: 124px;
	background: var(--csm-placeholder);
}

.csm-preview__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csm-preview__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 12px 14px;
}

.csm-preview__place {
	padding-right: 28px;
	color: var(--csm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.csm-preview__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.csm-preview__specs {
	color: var(--csm-muted);
	font-size: 13px;
}

.csm-preview__foot {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}

.csm-preview__price {
	font-size: 17px;
	font-weight: 800;
}

.csm-preview__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--csm-radius);
	background: transparent;
	color: var(--csm-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.csm-preview__close:hover {
	background: var(--csm-sand);
	color: var(--csm-ink);
}

.csm-preview--compact {
	right: 14px;
	bottom: 14px;
	left: 14px;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	max-width: 380px;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.csm-preview--compact .csm-preview__media {
	min-height: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}

.csm-preview--compact .csm-preview__body {
	gap: 2px;
	padding: 0;
}

.csm-preview--compact .csm-preview__place {
	padding-right: 0;
}

.csm-preview--compact .csm-preview__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csm-preview--compact .csm-preview__price {
	font-size: 16px;
	font-weight: 700;
}

/* Segmented radio group: Tous / Acheter / Louer */

.csm-segmented {
	display: flex;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 3px;
	border: 0;
	border-radius: var(--csm-radius);
	background: var(--csm-sand);
}

.csm-segmented__item,
.csm-search__tab {
	display: flex;
}

.csm-segmented__item input,
.csm-search__tab input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
}

.csm-segmented__item span {
	display: flex;
	align-items: center;
	padding: 0 14px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.csm-segmented__item input:checked + span,
.csm-search__tab input:checked + span {
	background: var(--csm-ink);
	color: var(--csm-white);
}

.csm-segmented__item input:focus-visible + span,
.csm-search__tab input:focus-visible + span {
	outline: 2px solid var(--csm-ink);
	outline-offset: 2px;
}

/* Notices */

.csm-notice {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--csm-radius);
	font-size: 14px;
}

.csm-notice p {
	margin: 0;
}

.csm-notice__title {
	font-size: 16px;
	font-weight: 700;
}

.csm-notice--success {
	background: var(--csm-select);
}

.csm-notice--error {
	border: 1px solid #e9b4b2;
	background: #fdf1f0;
	color: #8a1c1a;
}

/* 4. Header and footer
   -------------------------------------------------------------------------- */

/* The header and footer show on every page, including the pages built with Elementor, whose
   Site Settings (".elementor-kit-N a", ".elementor-kit-N h2", body colour…) load after this file.
   Their colour rules therefore start with ".csm-header" or ".csm-footer", to outrank them. */
.csm-header {
	position: relative;
	z-index: 1100;
	flex: none;
	border-bottom: 1px solid var(--csm-line);
	background: var(--csm-white);
	color: var(--csm-ink);
}

.csm-header__inner {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	max-width: var(--csm-container);
	margin: 0 auto;
	/* Little vertical padding: the logo sets the header height. */
	padding: 6px 32px;
}

.csm-layout-map .csm-header__inner {
	max-width: none;
	padding-block: 5px;
}

.csm-header__logo {
	flex: none;
}

.csm-header__logo .custom-logo-link {
	display: flex;
}

.csm-header__logo .custom-logo {
	display: block;
	width: auto;
	height: 80px;
}

.csm-layout-map .csm-header__logo .custom-logo {
	height: 70px;
}

.csm-header__nav {
	display: flex;
	flex: 1;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

.csm-nav {
	margin: 0 auto;
}

.csm-nav__list,
.csm-header__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csm-nav__list a {
	display: block;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.csm-header .csm-nav__list a,
.csm-header .csm-nav__list a:hover {
	color: var(--csm-ink);
}

.csm-nav__list .current-menu-item > a,
.csm-nav__list .current-menu-ancestor > a,
.csm-nav__list a[aria-current="page"] {
	box-shadow: 0 3px 0 var(--csm-yellow);
	font-weight: 700;
}

.csm-header__actions {
	display: flex;
	flex: none;
	gap: 20px;
	align-items: center;
}

.csm-header__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.csm-header .csm-header__links a {
	color: var(--csm-muted);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.csm-header .csm-header__links a:hover {
	color: var(--csm-ink);
}

.csm-header__mobile {
	display: none;
	gap: 8px;
	align-items: center;
}

.csm-burger {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--csm-radius);
	background: var(--csm-ink);
	cursor: pointer;
}

.csm-burger__bar {
	width: 20px;
	height: 2px;
	background: var(--csm-white);
}

@media (max-width: 1024px) {
	.csm-header__inner {
		padding: 6px 16px;
	}

	.csm-header__logo .custom-logo,
	.csm-layout-map .csm-header__logo .custom-logo {
		height: 60px;
	}

	/* Without JavaScript the navigation stays open under the logo. */
	.csm-header__inner {
		flex-wrap: wrap;
	}

	.csm-header__nav {
		flex: 1 1 100%;
		flex-direction: column;
		gap: 16px;
		align-items: stretch;
		padding: 8px 0 12px;
	}

	.csm-nav {
		margin: 0;
	}

	.csm-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.csm-nav__list a {
		padding: 12px 0;
		border-bottom: 1px solid var(--csm-line);
		font-size: 17px;
	}

	.csm-nav__list .current-menu-item > a,
	.csm-nav__list a[aria-current="page"] {
		box-shadow: inset 3px 0 0 var(--csm-yellow);
		padding-left: 12px;
	}

	.csm-header__actions {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.csm-js .csm-header__mobile {
		display: flex;
	}

	.csm-js .csm-header__nav {
		display: none;
	}

	.csm-js .csm-header__nav.is-open {
		display: flex;
	}
}

.csm-footer {
	background: var(--csm-ink);
	color: var(--csm-white);
}

.csm-footer :focus-visible {
	outline-color: var(--csm-yellow);
}

.csm-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--csm-container);
	margin: 0 auto;
	padding: 56px var(--csm-gutter) 32px;
}

.csm-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
}

.csm-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The logo file has a white background: on dark it always sits in a white frame. */
.csm-footer__logo {
	width: max-content;
	padding: 10px;
	border-radius: 8px;
	background: var(--csm-white);
}

.csm-footer__logo .custom-logo-link {
	display: flex;
}

.csm-footer__logo .custom-logo {
	display: block;
	width: auto;
	height: 60px;
}

.csm-footer__tagline {
	margin: 0;
	color: var(--csm-on-dark-muted);
	font-size: 14px;
}

.csm-footer .csm-footer__title {
	margin: 0 0 12px;
	color: var(--csm-yellow);
	font-size: 13px;
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csm-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	list-style: none;
}

.csm-footer .csm-footer__list a {
	color: var(--csm-white);
	text-decoration: none;
}

.csm-footer .csm-footer__list a:hover {
	color: var(--csm-yellow);
}

/* Bottom band: presentation text and copyright, then the social networks. */
.csm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: center;
	justify-content: space-between;
	padding-top: 24px;
	border-top: 1px solid var(--csm-ink-2);
}

.csm-footer__about {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 8px;
	max-width: 760px;
}

.csm-footer .csm-footer__seo {
	margin: 0;
	color: var(--csm-on-dark-muted);
	font-size: 14px;
	line-height: 1.55;
}

.csm-footer .csm-footer__legal {
	margin: 0;
	color: var(--csm-on-dark-muted);
	font-size: 13px;
}

.csm-footer__social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csm-footer .csm-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--csm-ink-2);
	border-radius: 50%;
	color: var(--csm-white);
}

.csm-footer .csm-footer__social a:hover {
	border-color: var(--csm-yellow);
	color: var(--csm-yellow);
}

.csm-footer__social svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* 5. Home page
   -------------------------------------------------------------------------- */

.csm-hero {
	background: var(--csm-yellow);
}

/* Background photos: stacked, the active one on top. The one it replaces stays opaque underneath
   until the fade ends, so that the ink background never shows through mid-fade. */
.csm-hero--photos {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--csm-ink);
}

.csm-hero__slides {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.csm-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.csm-hero__slide.is-leaving {
	z-index: 1;
	opacity: 1;
}

.csm-hero__slide.is-active {
	z-index: 2;
	opacity: 1;
}

/* Darker on the side of the text, so that it reads on any photo; the map side keeps the photo visible. */
.csm-hero__slides::after {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(90deg, rgba(26, 26, 24, 0.82) 0%, rgba(26, 26, 24, 0.6) 45%, rgba(26, 26, 24, 0.2) 100%);
	content: "";
}

@media (max-width: 1023px) {
	.csm-hero__slides::after {
		background: linear-gradient(180deg, rgba(26, 26, 24, 0.8) 0%, rgba(26, 26, 24, 0.55) 60%, rgba(26, 26, 24, 0.35) 100%);
	}
}

.csm-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	max-width: var(--csm-container);
	margin: 0 auto;
	padding: clamp(32px, 5vw, 72px) var(--csm-gutter);
}

.csm-hero__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.csm-hero__title {
	margin: 0;
}

.csm-hero__lead {
	max-width: 520px;
	margin: 0;
	font-size: clamp(17px, 1.4vw, 19px);
	text-wrap: pretty;
}

.csm-search {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border-radius: var(--csm-radius-card);
	background: var(--csm-white);
	box-shadow: 0 12px 32px rgba(26, 26, 24, 0.14);
	color: var(--csm-ink);
}

/* Slideshow controls: pause button and one bar per photo, the active one filling up as its photo stays. */
.csm-hero__controls {
	display: flex;
	gap: 14px;
	align-items: center;
}

.csm-hero__controls[hidden] {
	display: none;
}

.csm-hero__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(26, 26, 24, 0.35);
	cursor: pointer;
	backdrop-filter: blur(6px);
}

.csm-home > .csm-hero .csm-hero__toggle,
.csm-home > .csm-hero .csm-hero__toggle:hover {
	color: var(--csm-white);
}

.csm-hero__toggle:hover {
	border-color: var(--csm-white);
	background: rgba(26, 26, 24, 0.6);
}

.csm-hero__toggle:focus-visible {
	outline: 2px solid var(--csm-white);
	outline-offset: 2px;
}

.csm-hero__toggle[aria-pressed="false"] .csm-hero__icon-play,
.csm-hero__toggle[aria-pressed="true"] .csm-hero__icon-pause {
	display: none;
}

.csm-hero__progress {
	display: flex;
	flex: 1;
	gap: 6px;
	max-width: 220px;
}

.csm-hero__bar {
	position: relative;
	flex: 1;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
}

.csm-hero__bar::after {
	position: absolute;
	inset: 0;
	background: var(--csm-yellow);
	content: "";
	transform: scaleX(0);
	transform-origin: left;
}

.csm-hero__bar.is-active::after {
	animation: csm-hero-progress var(--csm-hero-delay, 6s) linear forwards;
}

.csm-hero.is-paused .csm-hero__bar.is-active::after,
.csm-hero.is-paused .csm-hero__slide {
	animation-play-state: paused;
}

@keyframes csm-hero-progress {
	to {
		transform: scaleX(1);
	}
}

/* Fade, and a slow zoom on the photo shown; the zoom goes on under the next photo while it fades in. */
@media (prefers-reduced-motion: no-preference) {
	.csm-hero__slide {
		transition: opacity 1.2s ease;
	}

	.csm-hero__slide.is-leaving {
		transition: none;
	}

	.csm-hero__slide:is(.is-active, .is-leaving) {
		animation: csm-hero-zoom calc(var(--csm-hero-delay, 6s) + 2.4s) linear forwards;
	}
}

@keyframes csm-hero-zoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.06);
	}
}

.csm-search__tabs {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 2px;
	border: 0;
}

.csm-search__tab span {
	padding: 10px 18px;
	border-radius: var(--csm-radius);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.csm-search__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

.csm-search__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border-radius: var(--csm-radius);
	background: var(--csm-paper);
}

.csm-search__field:focus-within {
	box-shadow: inset 0 0 0 2px var(--csm-ink);
}

.csm-search__label {
	color: var(--csm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.csm-search__field input,
.csm-search__field select {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--csm-ink);
	font-size: 16px;
	font-weight: 500;
}

.csm-search__field select {
	cursor: pointer;
}

.csm-search__submit {
	min-height: 56px;
	font-size: 16px;
}

.csm-hero__map {
	position: relative;
	height: clamp(340px, 36vw, 500px);
	overflow: hidden;
	border: 2px solid var(--csm-ink);
	border-radius: var(--csm-radius-card);
	background: var(--csm-sand);
}

.csm-hero__map-bar {
	position: absolute;
	top: 14px;
	right: 14px;
	left: 14px;
	z-index: 1000;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
	pointer-events: none;
}

.csm-hero__map-bar > * {
	pointer-events: auto;
}

.csm-hero__count {
	margin: 0;
	padding: 8px 12px;
	border-radius: var(--csm-radius);
	background: var(--csm-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	font-size: 14px;
	font-weight: 600;
}

@media (max-width: 767px) {
	.csm-search__submit {
		grid-column: 1 / -1;
	}
}

.csm-home__content {
	padding-top: clamp(56px, 7vw, 112px);
}

/* Agencies: two cards side by side down to a portrait tablet, stacked when they would get narrower than 340px. */

.csm-agences {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 24px;
}

.csm-agence {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--csm-line);
	border-radius: var(--csm-radius-card);
	background: var(--csm-white);
}

/* 16:9, the ratio of the photos shipped with the theme: a storefront cropped any wider loses its sign or its roof. */
.csm-agence__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--csm-placeholder);
}

.csm-agence__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csm-agence__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.csm-agence__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: baseline;
	justify-content: space-between;
}

.csm-agence__name {
	margin: 0;
	font-size: 26px;
	font-stretch: 88%;
	line-height: 1.15;
}

.csm-agence__address,
.csm-agence__hours {
	margin: 0;
	color: var(--csm-muted);
	font-style: normal;
}

.csm-agence__hours {
	font-size: 14px;
}

/* Pushed to the bottom, so that the buttons of both cards line up whatever the text above. */
.csm-agence__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: auto 0 0;
	padding-top: 4px;
}

.csm-home > :last-child {
	padding-bottom: clamp(56px, 7vw, 112px);
}

/* When the editorial zone of the home page is built with Elementor, its Site Settings load on the
   whole page (see the header). The sections of the theme keep their own colours; the Elementor
   zone (.csm-home__content) is left to them. Leaflet keeps its own link colour. */
.csm-home > :is(.csm-hero, .csm-section) {
	color: var(--csm-ink);
}

.csm-home > :is(.csm-hero, .csm-section) :is(h1, h2, h3),
.csm-home > :is(.csm-hero, .csm-section) a:not(.csm-btn, .leaflet-container a),
.csm-home > :is(.csm-hero, .csm-section) a:not(.csm-btn, .leaflet-container a):hover {
	color: inherit;
}

/* Hero over photos: light text on the darkened side, the eyebrow in the accent colour (yellow on ink). */
.csm-home > .csm-hero--photos .csm-hero__text,
.csm-home > .csm-hero--photos .csm-hero__title {
	color: var(--csm-white);
}

.csm-home > .csm-hero--photos .csm-eyebrow {
	color: var(--csm-yellow);
}

.csm-home > .csm-hero--photos .csm-hero__lead {
	color: rgba(255, 255, 255, 0.88);
}

.csm-hero--photos .csm-hero__title,
.csm-hero--photos .csm-hero__lead {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.csm-hero--photos .csm-hero__map {
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

/* Controls of the hero map: the colours of leaflet.css, restated for the same reason. */
.csm-home .leaflet-container a,
.csm-home .leaflet-container a:hover {
	color: #0078a8;
}

.csm-home .leaflet-bar a,
.csm-home .leaflet-bar a:hover {
	color: #000;
}

/* 6. Property listing (list and map)
   -------------------------------------------------------------------------- */

/* A full-height screen: header, filters, then the list and the map filling what is left. */

.csm-layout-map {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	min-height: 480px;
}

.csm-listing {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.csm-filters {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 12px var(--csm-gutter);
	border-bottom: 1px solid var(--csm-line);
	background: var(--csm-white);
}

.csm-filters__city {
	display: flex;
	flex: 1 1 220px;
	gap: 8px;
	align-items: center;
	max-width: 340px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--csm-field);
	border-radius: var(--csm-radius);
	background: var(--csm-paper);
}

.csm-filters__city:focus-within {
	border-color: var(--csm-ink);
	box-shadow: 0 0 0 1px var(--csm-ink);
}

.csm-filters__label {
	color: var(--csm-muted);
	font-size: 13px;
	font-weight: 600;
}

.csm-filters__city input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
}

.csm-filters__select select {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--csm-field);
	border-radius: var(--csm-radius);
	background: var(--csm-white);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.csm-filters__count {
	margin: 0 0 0 auto;
	font-size: 15px;
	font-weight: 600;
}

/* With JavaScript the filters apply as they change: no submit button needed. */
.csm-js .csm-filters__submit {
	display: none;
}

.csm-listing__body {
	position: relative;
	display: flex;
	flex: 1;
	min-height: 0;
}

.csm-listing__list {
	flex: none;
	width: min(460px, 42%);
	overflow-y: auto;
	border-right: 1px solid var(--csm-line);
	background: var(--csm-white);
}

.csm-listing__map {
	position: relative;
	flex: 1;
	min-width: 0;
	background: var(--csm-sand);
}

.csm-row__link {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 14px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--csm-line);
	color: var(--csm-ink);
	text-decoration: none;
}

.csm-row__link:hover,
.csm-row.is-hovered .csm-row__link {
	background: var(--csm-paper);
	color: var(--csm-ink);
}

.csm-row.is-selected .csm-row__link {
	background: var(--csm-select);
	box-shadow: inset 4px 0 0 var(--csm-yellow);
}

.csm-row__link:focus-visible {
	outline-offset: -2px;
}

.csm-row__media {
	position: relative;
	align-self: start;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--csm-radius);
	background: var(--csm-placeholder);
}

.csm-row__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csm-row__media .csm-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 3px 7px;
	border-radius: 3px;
	font-size: 11px;
	letter-spacing: 0.06em;
}

.csm-row__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.csm-row__body p {
	margin: 0;
}

.csm-row__place {
	color: var(--csm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.csm-row__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	font-stretch: 92%;
	line-height: 1.25;
	letter-spacing: 0;
	text-wrap: pretty;
}

.csm-row__specs {
	color: var(--csm-muted);
	font-size: 13px;
}

.csm-row__price {
	margin-top: auto !important;
	padding-top: 4px;
	font-size: 17px;
	font-weight: 800;
}

.csm-listing__empty {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	padding: 40px 24px;
}

.csm-listing__empty-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.csm-listing__toggle {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 1001;
	display: none;
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 24px;
	background: var(--csm-ink);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	color: var(--csm-white);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transform: translateX(-50%);
	cursor: pointer;
}

@media (max-width: 767px) {
	.csm-filters__count {
		display: none;
	}

	/* Without JavaScript: the list above, the map below. */
	.csm-listing__body {
		flex-direction: column;
	}

	.csm-listing__list {
		flex: 1;
		width: 100%;
		min-height: 0;
		border-right: 0;
	}

	.csm-listing__map {
		flex: none;
		height: 40%;
	}

	/* With JavaScript: one view at a time, switched with the floating button. */
	.csm-js .csm-listing__map {
		flex: 1;
		height: auto;
	}

	.csm-js .csm-listing[data-view="map"] .csm-listing__list,
	.csm-js .csm-listing[data-view="list"] .csm-listing__map {
		display: none;
	}

	.csm-js .csm-listing__toggle {
		display: block;
	}

	.csm-listing .csm-preview {
		bottom: 84px;
	}
}

/* 7. Property page
   -------------------------------------------------------------------------- */

.csm-single__top {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: var(--csm-container);
	margin: 0 auto;
	padding: 20px var(--csm-gutter) 0;
}

.csm-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--csm-muted);
	font-size: 14px;
}

.csm-breadcrumb a {
	color: var(--csm-muted);
	text-decoration: none;
}

.csm-breadcrumb a:hover {
	color: var(--csm-ink);
	text-decoration: underline;
}

.csm-breadcrumb a:last-of-type {
	color: var(--csm-ink);
	font-weight: 600;
}

/* Gallery */

.csm-gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.csm-gallery__stage {
	position: relative;
	width: 100%;
	max-height: 620px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--csm-radius-card);
	background: var(--csm-placeholder);
}

.csm-gallery__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csm-gallery__stage .csm-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 11px;
}

.csm-gallery__nav {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	padding: 0 0 4px;
	border: 0;
	border-radius: 50%;
	background: var(--csm-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: var(--csm-ink);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	transform: translateY(-50%);
	cursor: pointer;
}

.csm-gallery__nav:hover {
	background: var(--csm-yellow);
}

.csm-gallery__nav--prev {
	left: 12px;
}

.csm-gallery__nav--next {
	right: 12px;
}

.csm-gallery__counter {
	position: absolute;
	right: 16px;
	bottom: 16px;
	margin: 0;
	padding: 6px 11px;
	border-radius: 4px;
	background: var(--csm-ink);
	color: var(--csm-white);
	font-size: 13px;
	font-weight: 600;
}

.csm-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 2px 2px 6px;
	overflow-x: auto;
	list-style: none;
}

.csm-gallery__thumb {
	position: relative;
	display: block;
	flex: none;
	width: 112px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--csm-radius);
	background: var(--csm-placeholder);
	opacity: 0.7;
}

.csm-gallery__thumb:hover,
.csm-gallery__thumb.is-active {
	opacity: 1;
}

.csm-gallery__thumb.is-active {
	border-color: var(--csm-ink);
}

.csm-gallery__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Two columns: the content, and the contact panel that follows the scroll. */

.csm-single__layout {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 4vw, 56px);
	align-items: flex-start;
	max-width: var(--csm-container);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) var(--csm-gutter) 0;
}

.csm-single__main {
	display: flex;
	flex: 999 1 560px;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.csm-single__header {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.csm-single__title {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.csm-single__price {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: baseline;
	margin: 0;
}

.csm-single__amount {
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	line-height: 1;
}

.csm-single__per-m2 {
	color: var(--csm-muted);
	font-size: 15px;
}

.csm-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--csm-line);
	border-radius: var(--csm-radius-card);
	background: var(--csm-white);
}

/* The figure is read first, its label under it. */
.csm-facts__item {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	justify-content: flex-end;
	padding: 16px 18px;
	box-shadow: 1px 0 0 var(--csm-line), 0 1px 0 var(--csm-line);
}

.csm-facts__value {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	font-stretch: 90%;
	line-height: 1.1;
}

.csm-facts__label {
	color: var(--csm-muted);
	font-size: 13px;
}

.csm-block {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.csm-block__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
}

.csm-block__title {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.1;
	letter-spacing: 0;
}

.csm-block__note,
.csm-block__text {
	margin: 0;
	color: var(--csm-muted);
	font-size: 14px;
}

.csm-prose {
	max-width: 720px;
	color: var(--csm-text-2);
	font-size: 17px;
	line-height: 1.65;
	text-wrap: pretty;
}

.csm-prose p {
	margin: 0 0 14px;
}

.csm-prose p:last-child {
	margin-bottom: 0;
}

.csm-details {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	column-gap: 32px;
	margin: 0;
	border-top: 1px solid var(--csm-line);
}

.csm-details__row {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--csm-line);
	font-size: 15px;
}

.csm-details__row dt {
	color: var(--csm-muted);
}

.csm-details__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.csm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.csm-chips li {
	padding: 6px 12px;
	border-radius: var(--csm-radius);
	background: var(--csm-sand);
	font-size: 14px;
	font-weight: 600;
}

.csm-video {
	width: 100%;
	max-width: 720px;
	border-radius: var(--csm-radius-card);
	background: var(--csm-ink);
}

/* Energy classes: every step keeps its colour as a marker, the property's class is filled. */

.csm-dpe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 24px 32px;
}

.csm-dpe__title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	font-stretch: 100%;
	line-height: 1.4;
	letter-spacing: 0;
}

.csm-dpe__steps {
	display: flex;
	gap: 4px;
	align-items: flex-end;
	height: 54px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csm-dpe__step {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-bottom: 5px solid var(--csm-step);
	border-radius: 4px;
	background: var(--csm-sand);
	color: var(--csm-muted);
	font-size: 15px;
	font-weight: 700;
}

.csm-dpe__step.is-active {
	height: 54px;
	border-bottom: 0;
	background: var(--csm-step);
	color: var(--csm-step-text, var(--csm-ink));
	font-size: 22px;
	font-weight: 800;
}

.csm-dpe__value {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 600;
}

.csm-dpe__scale--energie [data-letter="A"] {
	--csm-step: #009a6e;
	--csm-step-text: #fff;
}

.csm-dpe__scale--energie [data-letter="B"] {
	--csm-step: #45b04a;
}

.csm-dpe__scale--energie [data-letter="C"] {
	--csm-step: #a2c83b;
}

.csm-dpe__scale--energie [data-letter="D"] {
	--csm-step: #f2e31b;
}

.csm-dpe__scale--energie [data-letter="E"] {
	--csm-step: #f5b219;
}

.csm-dpe__scale--energie [data-letter="F"] {
	--csm-step: #eb7b22;
}

.csm-dpe__scale--energie [data-letter="G"] {
	--csm-step: #d7221f;
	--csm-step-text: #fff;
}

.csm-dpe__scale--ges [data-letter="A"] {
	--csm-step: #a4dbf8;
}

.csm-dpe__scale--ges [data-letter="B"] {
	--csm-step: #8cb4d3;
}

.csm-dpe__scale--ges [data-letter="C"] {
	--csm-step: #7792b1;
}

.csm-dpe__scale--ges [data-letter="D"] {
	--csm-step: #606f8f;
	--csm-step-text: #fff;
}

.csm-dpe__scale--ges [data-letter="E"] {
	--csm-step: #4d5271;
	--csm-step-text: #fff;
}

.csm-dpe__scale--ges [data-letter="F"] {
	--csm-step: #393551;
	--csm-step-text: #fff;
}

.csm-dpe__scale--ges [data-letter="G"] {
	--csm-step: #281b35;
	--csm-step-text: #fff;
}

.csm-single__map {
	position: relative;
	height: clamp(280px, 30vw, 380px);
	overflow: hidden;
	border: 1px solid var(--csm-line);
	border-radius: var(--csm-radius-card);
	background: var(--csm-sand);
}

/* Contact panel */

.csm-contact {
	position: sticky;
	top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex: 1 1 320px;
	flex-direction: column;
	gap: 16px;
	max-width: 100%;
	scroll-margin-top: 24px;
}

.csm-contact__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--csm-line);
	border-radius: var(--csm-radius-card);
	background: var(--csm-white);
}

.csm-contact__who {
	display: flex;
	gap: 14px;
	align-items: center;
}

.csm-contact__who p {
	margin: 0;
}

.csm-contact__photo {
	flex: none;
	overflow: hidden;
	width: 56px;
	height: 56px;
	border: 1px solid var(--csm-line);
	border-radius: 50%;
	background: var(--csm-placeholder);
}

/* Portraits: the face sits in the upper part of the photo. */
.csm-contact__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.csm-contact__name {
	font-weight: 700;
}

.csm-contact__agence {
	color: var(--csm-muted);
	font-size: 14px;
	text-wrap: balance;
}

.csm-contact__meta {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0;
	padding: 0 4px;
	color: var(--csm-muted);
	font-size: 14px;
}

.csm-contact__share {
	padding: 0;
	border: 0;
	background: none;
	color: var(--csm-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.csm-contact__share:hover {
	color: var(--csm-ink);
}

.csm-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.csm-form__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1.3;
	letter-spacing: 0;
}

.csm-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.csm-form__field label {
	color: var(--csm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.csm-form__field input,
.csm-form__field textarea {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--csm-field);
	border-radius: var(--csm-radius);
	background: var(--csm-paper);
	color: var(--csm-ink);
	font-size: 15px;
	font-weight: 500;
}

.csm-form__field textarea {
	height: auto;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.csm-form__field input:focus,
.csm-form__field textarea:focus {
	border-color: var(--csm-ink);
	outline: 0;
	box-shadow: 0 0 0 1px var(--csm-ink);
}

.csm-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.csm-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px;
	align-items: start;
	margin: 0;
	color: var(--csm-muted);
	font-size: 12px;
	line-height: 1.45;
}

.csm-form__consent input {
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	accent-color: var(--csm-ink);
}

/* Price and contact bar pinned to the bottom of the screen on mobile */

.csm-sticky-bar {
	display: none;
}

@media (max-width: 767px) {
	.csm-contact {
		position: static;
	}

	.csm-single {
		padding-bottom: 76px;
	}

	.csm-sticky-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1200;
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		border-top: 1px solid var(--csm-line);
		background: var(--csm-white);
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
	}

	.csm-sticky-bar__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		margin: 0;
	}

	.csm-sticky-bar__price {
		font-size: 18px;
		font-weight: 800;
		line-height: 1.1;
	}

	.csm-sticky-bar__specs {
		color: var(--csm-muted);
		font-size: 13px;
	}

	.csm-sticky-bar .csm-btn {
		flex: none;
		min-height: 48px;
	}

	.csm-gallery__nav {
		width: 44px;
		height: 44px;
	}
}

/* 8. Maps
   -------------------------------------------------------------------------- */

.csm-map {
	position: absolute;
	inset: 0;
}

.csm-map.leaflet-container {
	background: var(--csm-sand);
	font-family: var(--csm-font);
}

/* Tiles keep their colours, slightly softened so that the price pins still stand out. */
.csm-map .leaflet-tile-pane {
	filter: saturate(0.9) brightness(1.03);
}

/* Price pin. Leaflet positions the zero-sized icon; the label sits above its point. */

.csm-pin__inner {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translate(-50%, -100%);
	cursor: pointer;
}

.csm-pin__label {
	padding: 6px 10px;
	border: 2px solid var(--csm-white);
	border-radius: var(--csm-radius);
	background: var(--csm-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	color: var(--csm-white);
	font-family: var(--csm-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.csm-pin__tip {
	width: 0;
	height: 0;
	margin-top: -1px;
	border-top: 7px solid var(--csm-ink);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
}

.csm-pin.is-active .csm-pin__label {
	border-color: var(--csm-ink);
	background: var(--csm-yellow);
	color: var(--csm-ink);
}

.csm-pin:focus-visible {
	outline: 0;
}

.csm-pin:focus-visible .csm-pin__label {
	outline: 2px solid var(--csm-ink);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.csm-btn,
	.csm-card__link,
	.csm-row__link,
	.csm-gallery__nav,
	.csm-gallery__thumb,
	.csm-footer__social a {
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	}
}

/* 9. Error page (404)
   -------------------------------------------------------------------------- */

.csm-error__band {
	padding-block: clamp(48px, 7vw, 112px);
	background: var(--csm-yellow);
}

/* Same frame as .csm-section, so that the title lines up with the cards below. */
.csm-error__head {
	max-width: var(--csm-container);
	margin-inline: auto;
	padding-inline: var(--csm-gutter);
}

.csm-error__title {
	max-width: 14ch;
	margin: 12px 0 16px;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.02;
}

.csm-error__lead {
	max-width: 620px;
	margin: 0;
	font-size: clamp(17px, 1.4vw, 19px);
	text-wrap: pretty;
}

.csm-error__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* Elementor Site Settings load on every page once Elementor is active (see the header): the
   page keeps the colours of the theme. */
.csm-error > :is(.csm-error__band, .csm-section) {
	color: var(--csm-ink);
}

.csm-error > :is(.csm-error__band, .csm-section) :is(h1, h2, h3),
.csm-error > :is(.csm-error__band, .csm-section) a:not(.csm-btn),
.csm-error > :is(.csm-error__band, .csm-section) a:not(.csm-btn):hover {
	color: inherit;
}

@media (max-width: 767px) {
	.csm-error__actions .csm-btn {
		flex: 1 1 100%;
	}
}