.bmt-logo {
	--bmt-logo-h: 84px;
	--bmt-logo-h-scrolled: 40px;
	--bmt-logo-w: 200px;
	--bmt-logo-w-scrolled: 120px;
	--bmt-logo-color: #ffffff;
	--bmt-logo-color-scrolled: #000000;
	--bmt-logo-speed: 400ms;
	display: inline-block;
	position: relative;
	width: var(--bmt-logo-w);
	height: var(--bmt-logo-h);
	transition: height var(--bmt-logo-speed) cubic-bezier(.2, .7, .2, 1), width var(--bmt-logo-speed) cubic-bezier(.2, .7, .2, 1);
}

.bmt-logo-svg {
	position: absolute;
	inset: 0;
	display: block;
	transform: scale(1);
	transition: opacity var(--bmt-logo-speed) ease, transform var(--bmt-logo-speed) ease, fill var(--bmt-logo-speed) ease;
}

.bmt-logo-svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Recoloration façon icônes du header : on force le fill de tous les tracés. */
.bmt-logo-svg svg,
.bmt-logo-svg svg * {
	fill: var(--bmt-logo-color) !important;
	transition: fill var(--bmt-logo-speed) ease;
}

.bmt-logo-svg--mini {
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
}

.header-scrolled .bmt-logo {
	height: var(--bmt-logo-h-scrolled);
	width: var(--bmt-logo-w-scrolled);
}

.header-scrolled .bmt-logo-svg--full {
	opacity: 0;
	transform: scale(1.1);
	pointer-events: none;
}

.header-scrolled .bmt-logo-svg--mini {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.header-scrolled .bmt-logo-svg svg,
.header-scrolled .bmt-logo-svg svg * {
	fill: var(--bmt-logo-color-scrolled) !important;
}

/* Repli <img> (SVG externe non lisible côté serveur) : pas de recoloration possible, juste le cadrage. */
.bmt-logo-svg--img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center left;
}

@media (prefers-reduced-motion: reduce) {
	.bmt-logo,
	.bmt-logo-svg,
	.bmt-logo-svg svg,
	.bmt-logo-svg svg * {
		transition: none;
	}
}

/* =========================================================
   Mode « texte éditable » : l'écusson reste une image, mais
   « Château & Jardins » / « BOUTEMONT » deviennent du vrai
   texte HTML, réglable depuis l'onglet Style (taille, graisse,
   police, interlettrage) au lieu d'être figé dans le fichier
   image.
   ========================================================= */

.bmt-logo--wordmark {
	--bmt-logo-gap: 8px;
	--bmt-wordmark-line-gap: 2px;
	--bmt-wordmark-color: #ffffff;
	--bmt-wordmark-color-scrolled: #000000;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bmt-logo-gap);
	width: auto;
	height: auto;
}

.bmt-logo--wordmark .bmt-logo-icon {
	display: block;
	flex: none;
	width: var(--bmt-logo-w);
	height: var(--bmt-logo-h);
	transition: width var(--bmt-logo-speed) cubic-bezier(.2, .7, .2, 1), height var(--bmt-logo-speed) cubic-bezier(.2, .7, .2, 1);
}

.bmt-logo--wordmark .bmt-logo-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bmt-logo--wordmark .bmt-logo-icon svg,
.bmt-logo--wordmark .bmt-logo-icon svg * {
	fill: var(--bmt-logo-color) !important;
	transition: fill var(--bmt-logo-speed) ease;
}

.bmt-logo--wordmark .bmt-logo-icon--img {
	object-fit: contain;
}

.bmt-logo-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bmt-wordmark-line-gap);
	max-height: 200px;
	overflow: hidden;
	opacity: 1;
	transition: opacity var(--bmt-logo-speed) ease, max-height var(--bmt-logo-speed) ease, margin var(--bmt-logo-speed) ease;
}

.bmt-logo-text__line1,
.bmt-logo-text__line2 {
	display: block;
	margin: 0;
	color: var(--bmt-wordmark-color);
	white-space: nowrap;
	transition: color var(--bmt-logo-speed) ease;
}

.header-scrolled .bmt-logo--wordmark .bmt-logo-icon {
	width: var(--bmt-logo-w-scrolled);
	height: var(--bmt-logo-h-scrolled);
}

.header-scrolled .bmt-logo-text {
	opacity: 0;
	max-height: 0;
	pointer-events: none;
}

.header-scrolled .bmt-logo-text__line1,
.header-scrolled .bmt-logo-text__line2 {
	color: var(--bmt-wordmark-color-scrolled);
}

@media (prefers-reduced-motion: reduce) {
	.bmt-logo--wordmark .bmt-logo-icon,
	.bmt-logo-text,
	.bmt-logo-text__line1,
	.bmt-logo-text__line2 {
		transition: none;
	}
}