/**
 * ==========================================================
 * MetrYMMO V2
 * BRAND SYSTEM
 * Noir / Crème / Or
 * Brun profond utilisé uniquement pour certains éléments premium
 * ==========================================================
 */

:root {
	--metrymmo-black: #0B0B0B;
	--metrymmo-black-soft: #111111;
	--metrymmo-brown: #21160F;
	--metrymmo-brown-dark: #17100C;
	--metrymmo-white: #FFFFFF;
	--metrymmo-cream: #F5EEE3;
	--metrymmo-cream-soft: #FBFAF7;
	--metrymmo-gold: #C99A55;
	--metrymmo-gold-light: #E0BB80;
	--metrymmo-champagne: #F0D7AE;
}


/* ==========================================================
   BASE
   ========================================================== */

html,
body {
	background: var(--metrymmo-cream);
	color: var(--metrymmo-black);
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
	background:
		linear-gradient(
			180deg,
			#080808 0%,
			#0B0B0B 100%
		) !important;
	border-bottom-color:
		rgba(255, 255, 255, .08) !important;
}

.site-navigation a,
.header-topbar a {
	color: #FFFFFF !important;
}

.header-actions .header-button {
	color: #0B0B0B !important;
}

.site-navigation li.menu-item--finance > a {
	color: #0B0B0B !important;
}

.site-navigation li.menu-item--finance > a:hover {
	color: #0B0B0B !important;
}

.site-navigation a:hover,
.header-actions a:hover {
	color: var(--metrymmo-gold-light) !important;
}

/* ==========================================================
   HERO BIENS
   ========================================================== */

.property-archive-header,
.property-hero,
.archive-header {
	position: relative;

	background:
		radial-gradient(
			circle at 82% 18%,
			rgba(201, 154, 85, .10),
			transparent 32%
		),
		radial-gradient(
			circle at 18% 100%,
			rgba(255, 255, 255, .025),
			transparent 38%
		),
		linear-gradient(
			135deg,
			#070707 0%,
			#0B0B0B 55%,
			#11100F 100%
		) !important;

	color: #FFFFFF !important;
}

.property-archive-header h1,
.property-hero h1,
.archive-header h1 {
	color: #FFFFFF !important;
}

.property-archive-header p,
.property-hero p,
.archive-header p {
	color:
		rgba(
			255,
			255,
			255,
			.72
		) !important;
}

.property-archive-header .eyebrow,
.property-archive-header .property-archive__eyebrow,
.property-hero .eyebrow,
.archive-header .eyebrow {
	color: #E0BB80 !important;
}

.property-archive-header .count,
.property-archive-header .property-archive__count,
.property-hero .count,
.archive-header .count {
	color: #E0BB80 !important;
}


/* ==========================================================
   SECTIONS CLAIRES
   ========================================================== */

.buy-search-section,
.sell-intro-section,
.sell-properties-section,
.financing-page-intro,
.financing-page-properties {
	background: #FFFFFF !important;
	color: var(--metrymmo-black);
}


/* ==========================================================
   POURQUOI METRYMMO
   ========================================================== */

.why-us {
	background:
		radial-gradient(
			circle at 85% 20%,
			rgba(201, 154, 85, .08),
			transparent 34%
		),
		linear-gradient(
			135deg,
			#17100C 0%,
			#21160F 48%,
			#120D0A 100%
		) !important;

	color: #FFFFFF !important;
}


/* ==========================================================
   CARTES
   ========================================================== */

.property-card,
.buy-process-card,
.sell-process-card,
.sell-service-card,
.financing-page-service {
	background: #FFFFFF !important;
	border-color:
		rgba(
			11,
			11,
			11,
			.08
		) !important;
}


/* ==========================================================
   FILTRES
   ========================================================== */

.property-filters {
	background: #FFFFFF !important;

	border-color:
		rgba(
			11,
			11,
			11,
			.08
		) !important;
}

.property-filter__input,
.property-filter__select,
.property-filter__input-wrap {
	background: #F7F4EE !important;
	border-color:
		rgba(
			11,
			11,
			11,
			.12
		) !important;
	color: #0B0B0B !important;
}

.property-filter__input:focus,
.property-filter__select:focus,
.property-filter__input-wrap:focus-within {
	background: #FFFFFF !important;
	border-color: #C99A55 !important;
}


/* ==========================================================
   LABELS OR
   ========================================================== */

.buy-eyebrow,
.sell-eyebrow,
.financing-page-eyebrow,
.buy-section-label,
.sell-section-label,
.financing-page-section-label {
	color: #C99A55 !important;
}


/* ==========================================================
   BOUTONS PRINCIPAUX
   ========================================================== */

.buy-button-primary,
.sell-button-primary,
.financing-page-button--primary,
.property-filters__submit,
.header-button,
.contact-button,
.button-primary {
	background:
		linear-gradient(
			135deg,
			#C99A55 0%,
			#E0BB80 100%
		) !important;

	color: #0B0B0B !important;
	border-color: transparent !important;
}

.buy-button-primary:hover,
.sell-button-primary:hover,
.financing-page-button--primary:hover,
.property-filters__submit:hover,
.header-button:hover,
.contact-button:hover,
.button-primary:hover {
	background:
		linear-gradient(
			135deg,
			#E0BB80 0%,
			#C99A55 100%
		) !important;

	color: #0B0B0B !important;
}


/* ==========================================================
   CTA SOMBRES
   ========================================================== */

.buy-finance-section,
.sell-cta-section,
.financing-page-cta,
.cta {
	background:
		radial-gradient(
			circle at 85% 15%,
			rgba(201, 154, 85, .08),
			transparent 35%
		),
		#0B0B0B !important;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
	background:
		linear-gradient(
			180deg,
			#080808 0%,
			#0B0B0B 100%
		) !important;
}

.footer-column h3 {
	color: #E0BB80 !important;
}

.footer-column a,
.footer-contact-item,
.footer-brand p,
.footer-bottom p,
.footer-bottom-links a {
	color:
		rgba(
			255,
			255,
			255,
			.62
		) !important;
}

.footer-column a:hover,
.footer-contact-item a:hover,
.footer-bottom-links a:hover {
	color: #E0BB80 !important;
}

.footer-brand img {
	display: block;

	width: 145px !important;
	max-width: 145px !important;
	height: auto !important;
	max-height: 62px !important;
}


/* ==========================================================
   404
   ========================================================== */

.error-404 {
	background:
		radial-gradient(
			circle at 85% 20%,
			rgba(201, 154, 85, .09),
			transparent 34%
		),
		#0B0B0B !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

.metrymmo-privacy-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: #25221d;
	font-size: 14px;
	line-height: 1.6;
}

.metrymmo-privacy-consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: #b58b52;
}

.metrymmo-finance-unavailable {
	margin: 18px 0;
	padding: 14px 16px;
	border-left: 3px solid #b58b52;
	background: rgba(181, 139, 82, .09);
	color: #25221d;
	line-height: 1.6;
}

.metrymmo-finance-unavailable a {
	color: inherit;
	font-weight: 600;
}

@media (max-width: 700px) {

	.footer-brand img {
		width: 130px !important;
		max-width: 130px !important;
		max-height: 58px !important;
	}

	.property-archive-header,
	.property-hero,
	.archive-header {
		background:
			radial-gradient(
				circle at 80% 15%,
				rgba(201, 154, 85, .08),
				transparent 34%
			),
			linear-gradient(
				135deg,
				#070707 0%,
				#0B0B0B 60%,
				#11100F 100%
			) !important;
	}

}

/* One shared size and silhouette for all primary action links/buttons. */
:is(.header-button, .hero-button-primary, .buy-button-primary, .sell-button-primary, .location-button-primary, .contact-page-button--primary, .estimation-page-button--primary, .financing-page-button--primary, .finance-button, .error-404__button--primary, .property-archive-empty-button, .property-filters__submit, .button-primary, .btn-primary, form input[type="submit"]) {
	min-height: 48px !important;
	padding: 0 22px !important;
	border-radius: 999px !important;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

:is(.header-button, .hero-button-primary, .buy-button-primary, .sell-button-primary, .location-button-primary, .contact-page-button--primary, .estimation-page-button--primary, .financing-page-button--primary, .finance-button, .error-404__button--primary, .property-archive-empty-button, .property-filters__submit, .button-primary, .btn-primary, form input[type="submit"]):hover {
	transform: translateY(-1px);
}

:is(.hero-button-secondary, .buy-button-secondary, .sell-button-secondary, .location-button-secondary, .contact-page-button--secondary, .estimation-page-button--secondary, .financing-page-button--secondary, .error-404__button--secondary, .button-secondary, .btn-outline) {
	min-height: 48px;
	padding-inline: 22px;
	border-radius: 999px !important;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
}

:is(.header-button, .hero-button, .buy-button, .sell-button, .location-button, .contact-page-button, .estimation-page-button, .financing-page-button, .finance-button, .error-404__button, .button-primary, .button-secondary, form input[type="submit"]):focus-visible {
	outline: 3px solid #f0d7ae;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	:is(.header-button, .hero-button, .buy-button, .sell-button, .location-button, .contact-page-button, .estimation-page-button, .financing-page-button, .finance-button, .error-404__button) { transition-duration: .01ms !important; }
}