.mhm {
	--mhm-ink: #2b3337;
	--mhm-ink-soft: #3a4449;
	--mhm-muted: #5e696f;
	--mhm-muted-light: #7a848a;
	--mhm-honey: #b07312;
	--mhm-honey-light: #d4941a;
	--mhm-line: #e2ded5;
	--mhm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: 'Montserrat', system-ui, sans-serif;
}

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

.mhm img {
	max-width: none;
	height: auto;
	border: 0;
}

.mhm a {
	text-decoration: none;
	box-shadow: none;
}

.mhm button {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.mhm .mhm-icon {
	display: block;
	flex-shrink: 0;
}

/* Barre */

.mhm header.mhm-bar {
	--mhm-fg: var(--mhm-top-fg, #fff);
	--mhm-inverse: var(--mhm-scroll-fg, #2b3337);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99990;
	pointer-events: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 24px 0;
	border: 0;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none;
	backdrop-filter: none;
	color: var(--mhm-fg);
	transition: background-color 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease, color 0.3s ease;
}

.admin-bar .mhm header.mhm-bar,
.admin-bar .mhm-panel {
	top: 32px;
}

.mhm header.mhm-bar--clair {
	--mhm-fg: var(--mhm-light-fg, #2b3337);
	--mhm-inverse: var(--mhm-bar-bg, #fff);
}

.mhm header.mhm-bar--blanche,
.mhm header.mhm-bar.is-scrolled {
	--mhm-fg: var(--mhm-scroll-fg, #2b3337);
	--mhm-inverse: var(--mhm-bar-bg, #fff);
}

.mhm header.mhm-bar--blanche,
.mhm header.mhm-bar.is-scrolled {
	padding: 12px 0;
	background: var(--mhm-bar-bg, #fff) !important;
	box-shadow: 0 1px 16px rgba(43, 51, 55, 0.08);
}

.mhm-bar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 0 clamp(16px, 5vw, 64px);
}

.mhm-bar__left,
.mhm-bar__right {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	pointer-events: auto;
}

.mhm-bar__right {
	justify-content: flex-end;
}

.mhm .mhm-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: -10px;
	padding: 10px;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	color: var(--mhm-fg);
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.mhm .mhm-toggle .mhm-icon {
	transition: transform 0.3s ease;
}

.mhm .mhm-toggle:hover .mhm-icon,
.mhm .mhm-toggle:focus-visible .mhm-icon {
	transform: scale(1.1);
}

.mhm-logo {
	display: block;
	opacity: 0;
	transform: scale(0.75);
	pointer-events: none;
	transition: opacity 0.5s ease, transform 0.5s var(--mhm-ease);
}

.mhm header.mhm-bar--blanche,
.mhm header.mhm-bar.is-scrolled {
	pointer-events: auto;
}

.mhm-bar--blanche .mhm-logo,
.mhm-bar.is-scrolled .mhm-logo {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.mhm-logo img {
	display: block;
	width: auto;
	height: 40px;
}

.mhm-logo--black img {
	filter: brightness(0);
}

.mhm .mhm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--mhm-fg);
	background: var(--mhm-btn-bg, transparent);
	color: var(--mhm-fg);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.mhm .mhm-btn:hover,
.mhm .mhm-btn:focus-visible,
.mhm .mhm-btn.is-current {
	background: var(--mhm-fg);
	color: var(--mhm-inverse);
}

.mhm .mhm-btn--cart {
	position: relative;
}

.mhm-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin: -4px -8px -4px 0;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--mhm-honey);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	animation: mhm-pop 0.5s var(--mhm-ease);
}

@keyframes mhm-pop {
	from {
		transform: scale(0.4);
		opacity: 0;
	}
}

.mhm-spacer {
	height: 64px;
}

/* Réseaux sociaux */

.mhm-socials {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mhm-socials--bar {
	margin-left: 8px;
	padding-left: 16px;
	border-left: 1px solid currentColor;
	border-left-color: color-mix(in srgb, currentColor 30%, transparent);
}

.mhm .mhm-social {
	display: inline-flex;
	color: inherit;
	transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.mhm .mhm-social:hover,
.mhm .mhm-social:focus-visible {
	transform: translateY(-2px);
}

.mhm-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.mhm-social__icon--simple {
	width: 28px;
	height: 28px;
}

.mhm-social__icon--rond,
.mhm-social__icon--plein,
.mhm-social__icon--carre {
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
}

.mhm-social__icon--rond,
.mhm-social__icon--plein {
	border-radius: 50%;
}

.mhm-social__icon--carre {
	border-radius: 6px;
}

.mhm-social__icon--plein {
	background: currentColor;
}

.mhm-social__icon--plein .mhm-icon {
	color: var(--mhm-inverse, #fff);
}

.mhm-social__icon--image img {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Panneau */

.mhm-panel {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	transition: visibility 0s linear 0.5s;
}

.mhm-panel.is-open {
	visibility: visible;
	transition-delay: 0s;
}

.mhm-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(43, 51, 55, 0.5);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.mhm-panel.is-open .mhm-panel__backdrop {
	opacity: 1;
}

.mhm-panel__sheet {
	--mhm-inverse: var(--mhm-panel-bg, #fff);
	--mhm-ink: var(--mhm-panel-fg, #2b3337);
	--mhm-ink-soft: var(--mhm-panel-fg, #3a4449);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 100%);
	height: 100%;
	overflow-y: auto;
	background: var(--mhm-panel-bg, #fff);
	color: var(--mhm-ink-soft);
	transform: translateX(-100%);
	transition: transform 0.5s var(--mhm-ease);
}

.mhm-panel.is-open .mhm-panel__sheet {
	transform: none;
}

.mhm-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 40px;
}

.mhm-panel__head img {
	display: block;
	width: auto;
	height: 36px;
}

.mhm-panel__logo {
	display: block;
	transition: opacity 0.3s ease, transform 0.3s var(--mhm-ease);
}

.mhm-panel__logo:hover {
	opacity: 0.8;
	transform: scale(1.04);
}

.mhm-logo:focus-visible,
.mhm-panel__logo:focus-visible {
	outline: 2px solid var(--mhm-honey);
	outline-offset: 4px;
}

.mhm .mhm-close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mhm-ink-soft);
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.mhm .mhm-close:hover,
.mhm .mhm-close:focus-visible {
	color: var(--mhm-honey);
}

.mhm-panel__nav {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	padding: 32px 40px;
}

.mhm-panel__nav--haut {
	justify-content: flex-start;
}

.mhm-panel__nav--bas {
	justify-content: flex-end;
}

.mhm .mhm-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mhm .mhm-nav li {
	margin: 0;
	padding: 0;
}

.mhm .mhm-nav__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	color: var(--mhm-ink-soft);
	font-family: 'Marcellus', Georgia, serif;
	font-size: var(--mhm-nav-size, 24px);
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(-24px);
	transition: color 0.3s ease, opacity 0.5s ease, transform 0.5s var(--mhm-ease);
}

.mhm-panel.is-open .mhm-nav__link {
	opacity: 1;
	transform: none;
	transition-delay: 0s, calc(150ms + var(--mhm-i, 0) * 60ms), calc(150ms + var(--mhm-i, 0) * 60ms);
}

.mhm .mhm-nav__link:hover,
.mhm .mhm-nav__link:focus-visible,
.mhm .mhm-nav__link.is-current {
	color: var(--mhm-honey);
}

.mhm-nav__line {
	width: 0;
	height: 1px;
	background: var(--mhm-honey-light);
	transition: width 0.5s var(--mhm-ease);
}

.mhm-nav__link:hover .mhm-nav__line,
.mhm-nav__link:focus-visible .mhm-nav__line,
.mhm-nav__link.is-current .mhm-nav__line {
	width: 32px;
}

.mhm-panel__foot {
	padding: 32px 40px;
}

.mhm .mhm-brand {
	margin: 0;
	color: var(--mhm-ink);
	font-family: 'Amatic SC', cursive;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
}

.mhm .mhm-tagline {
	margin: 8px 0 0;
	color: var(--mhm-muted-light);
	font-size: 10px;
	letter-spacing: 0.3em;
	line-height: 1.5;
	text-transform: uppercase;
}

.mhm .mhm-email {
	display: inline-block;
	margin-top: 16px;
	color: var(--mhm-muted);
	font-size: 14px;
	transition: color 0.3s ease;
}

.mhm .mhm-email:hover,
.mhm .mhm-email:focus-visible {
	color: var(--mhm-honey);
}

.mhm-socials--panel {
	margin-top: 24px;
	color: var(--mhm-ink-soft);
}

.mhm-socials--panel .mhm-social:hover,
.mhm-socials--panel .mhm-social:focus-visible {
	color: var(--mhm-honey);
}

html.mhm-locked,
html.mhm-locked body {
	overflow: hidden;
}

@media (max-width: 782px) {
	.admin-bar .mhm header.mhm-bar,
	.admin-bar .mhm-panel {
		top: 46px;
	}

	.mhm header.mhm-bar {
		padding: 16px 0;
	}

	.mhm header.mhm-bar--blanche,
	.mhm header.mhm-bar.is-scrolled {
		padding: 10px 0;
	}

	.mhm-bar__inner {
		gap: 8px;
	}

	.mhm .mhm-btn.has-icon {
		padding: 9px 12px;
	}

	.mhm .mhm-btn.has-icon .mhm-btn__label {
		display: none;
	}

	.mhm-cart-count {
		position: absolute;
		top: -8px;
		right: -8px;
		margin: 0;
	}

	.mhm-logo img {
		height: 34px;
	}

	.mhm-spacer {
		height: 56px;
	}

	.mhm-socials--bar {
		display: none;
	}

	.mhm-panel__head,
	.mhm-panel__nav,
	.mhm-panel__foot {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 600px) {
	.admin-bar .mhm header.mhm-bar {
		top: 0;
	}

	.mhm .mhm-toggle__label {
		display: none;
	}

	.mhm .mhm-btn {
		padding: 9px 12px;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mhm-bar,
	.mhm-logo,
	.mhm-panel__sheet,
	.mhm-panel__backdrop,
	.mhm .mhm-nav__link {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}
