@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

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

#mbi-app {
	--mbi-bg: #FAF9F5;
	--mbi-surface: #FFFFFF;
	--mbi-ink: #171B1D;
	--mbi-ink-soft: #5B6265;
	--mbi-line: #E7E3DA;

	--mbi-froid: #146C74;
	--mbi-froid-deep: #0C4A50;
	--mbi-froid-tint: #E1F3F1;

	--mbi-chaud: #C1531A;
	--mbi-chaud-deep: #8F3A10;
	--mbi-chaud-tint: #FBEBDD;

	--mbi-gold: #B98A22;
	--mbi-rose: #A93B58;

	--mbi-font-display: 'Fraunces', Georgia, serif;
	--mbi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--mbi-font-mono: 'JetBrains Mono', 'Courier New', monospace;

	position: relative;
	background: var(--mbi-bg);
	color: var(--mbi-ink);
	font-family: var(--mbi-font-body);
	border-radius: 18px;
	overflow: hidden;
	min-height: 480px;
	isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
	#mbi-app *, #mbi-app *::before, #mbi-app *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- Loader ---------- */
.mbi-loader {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 480px;
}
.mbi-loader span {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--mbi-froid);
	animation: mbi-bounce 1s infinite ease-in-out;
}
.mbi-loader span:nth-child(2) { background: var(--mbi-chaud); animation-delay: 0.15s; }
.mbi-loader span:nth-child(3) { background: var(--mbi-gold); animation-delay: 0.3s; }
@keyframes mbi-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: .5; }
	40% { transform: translateY(-10px); opacity: 1; }
}

/* ---------- Layout ---------- */
.mbi-shell { display: flex; flex-direction: column; min-height: 480px; }

.mbi-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(250, 249, 245, 0.94);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--mbi-line);
}

.mbi-nav {
	display: flex;
	gap: 8px;
	padding: 14px 18px 10px;
	overflow-x: auto;
	scrollbar-width: none;
}
.mbi-nav::-webkit-scrollbar { display: none; }

.mbi-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px 12px;
	flex-wrap: wrap;
}

.mbi-search {
	flex: 1 1 200px;
	min-width: 160px;
	position: relative;
	display: flex;
	align-items: center;
}
.mbi-search-icon {
	position: absolute;
	left: 12px;
	font-size: 13px;
	opacity: .6;
	pointer-events: none;
}
.mbi-search input {
	width: 100%;
	font-family: var(--mbi-font-body);
	font-size: 14px;
	padding: 9px 14px 9px 34px;
	border-radius: 999px;
	border: 1px solid var(--mbi-line);
	background: var(--mbi-surface);
	color: var(--mbi-ink);
}
.mbi-search input:focus-visible {
	outline: 2px solid var(--mbi-froid);
	outline-offset: 1px;
}

.mbi-lang-switch {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
}
.mbi-lang-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--mbi-line);
	background: var(--mbi-surface);
	font-size: 15px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: border-color .2s ease, transform .15s ease;
}
.mbi-lang-btn:hover { transform: translateY(-1px); }
.mbi-lang-btn.active { border-color: var(--mbi-ink); box-shadow: 0 0 0 1px var(--mbi-ink); }

.mbi-nav-btn {
	flex: 0 0 auto;
	font-family: var(--mbi-font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--mbi-line);
	background: var(--mbi-surface);
	color: var(--mbi-ink-soft);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
	white-space: nowrap;
}
.mbi-nav-btn:hover { transform: translateY(-1px); }
.mbi-nav-btn:focus-visible { outline: 2px solid var(--mbi-froid); outline-offset: 2px; }
.mbi-nav-btn.active {
	background: var(--mbi-ink);
	color: #fff;
	border-color: var(--mbi-ink);
}

.mbi-view {
	padding: 24px 20px 48px;
}
.mbi-view.mbi-fade-in {
	animation: mbi-view-in .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes mbi-view-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.mbi-section-title {
	font-family: var(--mbi-font-display);
	font-weight: 600;
	font-size: 26px;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}
.mbi-section-sub {
	color: var(--mbi-ink-soft);
	font-size: 14px;
	margin: 0 0 20px;
}

/* ---------- Bannière de catégorie ---------- */
.mbi-cat-banner {
	position: relative;
	height: 180px;
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	margin-bottom: 8px;
}
.mbi-cat-banner-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 18px 22px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
.mbi-section-title.mbi-on-banner {
	color: #fff;
	margin: 0;
}
@media (max-width: 480px) {
	.mbi-cat-banner { height: 130px; }
}

/* ---------- Featured carousel ---------- */
.mbi-featured-row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 34px;
	scroll-snap-type: x proximity;
}
.mbi-featured-row:last-child { margin-bottom: 0; }
.mbi-featured-card {
	scroll-snap-align: start;
	flex: 0 0 220px;
	background: var(--mbi-surface);
	border: 1px solid var(--mbi-line);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.mbi-featured-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -12px rgba(23,27,29,.25); }
.mbi-featured-card img { width: 100%; height: 140px; object-fit: cover; display: block; background: var(--mbi-line); }
.mbi-featured-card .mbi-card-body { padding: 12px 14px; }
.mbi-featured-card h4 { margin: 0 0 4px; font-family: var(--mbi-font-display); font-size: 16px; }
.mbi-featured-card .mbi-price { font-family: var(--mbi-font-mono); font-size: 13px; color: var(--mbi-froid-deep); }

/* ---------- Grid ---------- */
.mbi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

.mbi-card {
	position: relative;
	background: var(--mbi-surface);
	border: 1px solid var(--mbi-line);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.mbi-card:hover, .mbi-card:focus-visible {
	transform: translateY(-5px);
	box-shadow: 0 16px 30px -16px rgba(23,27,29,.3);
	border-color: var(--mbi-ink);
}
.mbi-card:focus-visible { outline: 2px solid var(--mbi-froid); outline-offset: 2px; }
.mbi-card:active { transform: translateY(-1px) scale(.99); }

.mbi-card-image {
	position: relative;
	height: 150px;
	background: var(--mbi-froid-tint);
	overflow: hidden;
}
.mbi-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbi-card-image .mbi-emoji-fallback {
	display: flex; align-items: center; justify-content: center;
	height: 100%; font-size: 42px;
}

.mbi-badge {
	position: absolute;
	top: 10px; left: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 5px 10px;
	border-radius: 999px;
	color: #fff;
	background: var(--mbi-ink);
}
.mbi-badge.nouveau { background: var(--mbi-froid); }
.mbi-badge.best_seller { background: var(--mbi-gold); }
.mbi-badge.coup_de_coeur { background: var(--mbi-rose); }
.mbi-badge.promotion { background: var(--mbi-chaud); }

.mbi-temp-icons {
	position: absolute;
	bottom: 10px; right: 10px;
	display: flex;
	gap: 4px;
}
.mbi-temp-icons span {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.9);
	font-size: 13px;
}

.mbi-saveur-flag {
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
}

.mbi-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.mbi-card-body h3 {
	font-family: var(--mbi-font-display);
	font-weight: 600;
	font-size: 18px;
	margin: 0;
	letter-spacing: -0.01em;
}
.mbi-card-desc {
	color: var(--mbi-ink-soft);
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mbi-card-footer {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mbi-price {
	font-family: var(--mbi-font-mono);
	font-weight: 700;
	font-size: 15px;
	color: var(--mbi-froid-deep);
}
.mbi-icone { font-size: 18px; }

.mbi-anchor {
	height: 1px;
	scroll-margin-top: 130px;
}

.mbi-cat-section {
	scroll-margin-top: 130px;
	margin-bottom: 44px;
	transition: opacity .3s ease;
}
.mbi-cat-section.mbi-search-hide { display: none; }

.mbi-card.mbi-search-hide { display: none; }

/* Recadrage global des photos de saveurs (zoom + position réglables dans Apparence),
   utile quand la photo source contient à la fois le visuel et un texte à masquer. */
.mbi-saveur-photo {
	transform: scale(var(--mbi-saveur-zoom, 1));
	object-position: center var(--mbi-saveur-focus, 15%);
}

.mbi-empty {
	color: var(--mbi-ink-soft);
	font-size: 14px;
	padding: 40px 0;
	text-align: center;
}

/* ---------- Effet spotlight : flou/grisé + zoom + panneau inline ---------- */
.mbi-card.mbi-dimmed {
	filter: blur(3px) grayscale(65%);
	opacity: .45;
	transform: scale(.98);
}
.mbi-featured-card.mbi-dimmed {
	filter: blur(2px) grayscale(65%);
	opacity: .4;
}

.mbi-card.mbi-selected {
	transform: scale(1.045);
	box-shadow: 0 22px 40px -18px rgba(23,27,29,.4);
	border-color: var(--mbi-ink);
	z-index: 5;
}

.mbi-grid {
	position: relative;
}

.mbi-expansion-panel {
	grid-column: 1 / -1;
	position: relative;
	background: var(--mbi-surface);
	border: 1px solid var(--mbi-line);
	border-radius: 18px;
	padding: 26px 26px 24px;
	box-shadow: 0 20px 44px -20px rgba(23,27,29,.35);
	opacity: 0;
	transform: translateY(-10px) scale(.98);
	transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mbi-expansion-panel.mbi-panel-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.mbi-panel-close {
	position: absolute;
	top: 16px; right: 16px;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--mbi-line);
	background: var(--mbi-bg);
	font-size: 15px;
	cursor: pointer;
}

.mbi-panel-title {
	font-family: var(--mbi-font-display);
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 16px;
	padding-right: 40px;
}
.mbi-panel-count { color: var(--mbi-ink-soft); font-size: 14px; font-weight: 400; }

/* Choix chaud / froid inline */
.mbi-temp-inline {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.mbi-temp-inline-btn {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 16px;
	border-radius: 14px;
	border: 2px solid var(--mbi-line);
	background: var(--mbi-bg);
	cursor: pointer;
	font-family: var(--mbi-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--mbi-ink);
	transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.mbi-temp-inline-btn:hover { transform: translateY(-3px); }
.mbi-temp-inline-btn.chaud:hover { border-color: var(--mbi-chaud); background: var(--mbi-chaud-tint); }
.mbi-temp-inline-btn.froid:hover { border-color: var(--mbi-froid); background: var(--mbi-froid-tint); }
.mbi-temp-emoji { font-size: 30px; }
.mbi-temp-inline-prix {
	font-family: var(--mbi-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--mbi-ink-soft);
}

/* Choix de saveur inline (grille dense, jusqu'à ~80 saveurs) */
.mbi-saveur-inline-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	max-height: 320px;
	overflow-y: auto;
	padding-right: 4px;
}
.mbi-saveur-inline-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 6px;
	border-radius: 12px;
	border: 2px solid var(--mbi-line);
	background: var(--mbi-bg);
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}
.mbi-saveur-inline-card:hover {
	transform: translateY(-2px);
	border-color: var(--mbi-saveur-color, var(--mbi-ink));
}
.mbi-saveur-inline-card img {
	width: 42px; height: 42px;
	border-radius: 50%;
	object-fit: cover;
}
.mbi-saveur-inline-card .mbi-saveur-swatch {
	width: 42px; height: 42px;
	border-radius: 50%;
	display: block;
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}
.mbi-saveur-inline-card span:last-child {
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
}

/* Étape finale (récap + suppléments + prix) */
.mbi-panel-final { padding-right: 30px; }
.mbi-panel-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mbi-panel-desc { font-size: 14px; line-height: 1.6; color: var(--mbi-ink-soft); margin: 0 0 16px; }
.mbi-panel-footer {
	display: flex;
	justify-content: flex-end;
	padding-top: 14px;
	border-top: 1px solid var(--mbi-line);
	margin-top: 6px;
}
.mbi-panel-price {
	font-family: var(--mbi-font-mono);
	font-size: 26px;
	font-weight: 700;
}

@media (max-width: 640px) {
	.mbi-expansion-panel { padding: 22px 18px 20px; }
	.mbi-temp-inline { flex-direction: column; }
	.mbi-saveur-inline-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); max-height: 260px; }
}

/* ---------- Boisson personnalisable : galerie de saveurs directe ---------- */
.mbi-composer {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px dashed var(--mbi-line);
}
.mbi-composer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}
.mbi-composer-title {
	font-family: var(--mbi-font-display);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 4px;
}
.mbi-composer-desc {
	font-size: 13px;
	color: var(--mbi-ink-soft);
	margin: 0;
	max-width: 480px;
}
.mbi-composer-filter-wrap {
	position: relative;
	flex: 0 0 220px;
}
.mbi-composer-filter-wrap .mbi-search-icon {
	position: absolute;
	left: 12px; top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	opacity: .6;
}
.mbi-composer-filter {
	width: 100%;
	font-family: var(--mbi-font-body);
	font-size: 13px;
	padding: 8px 12px 8px 32px;
	border-radius: 999px;
	border: 1px solid var(--mbi-line);
	background: var(--mbi-surface);
	color: var(--mbi-ink);
}

.mbi-composer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	gap: 10px 8px;
}
.mbi-composer-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 4px 6px;
	border-radius: 12px;
	border: 2px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .15s ease, filter .3s ease, opacity .3s ease;
}
.mbi-composer-tile:hover {
	background: var(--mbi-bg);
	transform: translateY(-2px);
}
.mbi-composer-tile img,
.mbi-composer-tile .mbi-saveur-swatch {
	width: 52px; height: 52px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.mbi-composer-tile span:last-child {
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
	max-width: 74px;
}
.mbi-composer-tile.mbi-selected {
	border-color: var(--mbi-saveur-color, var(--mbi-ink));
	background: var(--mbi-bg);
}
.mbi-composer-tile.mbi-selected img,
.mbi-composer-tile.mbi-selected .mbi-saveur-swatch {
	box-shadow: 0 0 0 3px var(--mbi-saveur-color, var(--mbi-ink));
}
.mbi-composer-tile.mbi-dimmed {
	opacity: .35;
	filter: grayscale(60%);
}
.mbi-composer-tile.mbi-search-hide { display: none; }

.mbi-composer-result {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.mbi-composer-result.mbi-composer-result-open {
	max-height: 900px;
	opacity: 1;
	margin-top: 20px;
}
.mbi-composer-result .mbi-panel-close,
.mbi-composer-result .mbi-panel-title,
.mbi-composer-result .mbi-panel-final {
	position: relative;
}
.mbi-composer-result-open {
	background: var(--mbi-bg);
	border: 1px solid var(--mbi-line);
	border-radius: 16px;
	padding: 22px 24px;
}

@media (max-width: 640px) {
	.mbi-composer-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px 6px; }
	.mbi-composer-tile img, .mbi-composer-tile .mbi-saveur-swatch { width: 44px; height: 44px; }
	.mbi-composer-filter-wrap { flex-basis: 100%; }
}

/* ---------- Overlay du parcours de sélection (élément signature) ---------- */
.mbi-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	background: #171B1D;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
.mbi-overlay.open { opacity: 1; pointer-events: auto; }

.mbi-scene-wrap {
	position: relative;
	flex: 1;
	display: flex;
	overflow: hidden;
}
.mbi-scene {
	position: absolute;
	inset: 0;
	display: flex;
	transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
	transform: translateX(0);
	opacity: 1;
}
.mbi-scene.mbi-scene-in { transform: translateX(48px); opacity: 0; }
.mbi-scene.mbi-scene-out { transform: translateX(-48px); opacity: 0; }

.mbi-temp-choice {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #fff;
	font-family: var(--mbi-font-display);
	font-size: clamp(28px, 5vw, 52px);
	font-weight: 600;
	cursor: pointer;
	border: none;
	position: relative;
	overflow: hidden;
	transform: translateY(0);
	transition: flex-grow .4s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.mbi-temp-choice .mbi-temp-emoji { font-size: clamp(36px, 6vw, 64px); }
.mbi-temp-choice .mbi-temp-label-sub {
	font-family: var(--mbi-font-body);
	font-size: 14px;
	font-weight: 500;
	opacity: .85;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.mbi-temp-choice.chaud {
	background: radial-gradient(circle at 30% 20%, #E27A34, var(--mbi-chaud-deep) 70%);
}
.mbi-temp-choice.froid {
	background: radial-gradient(circle at 70% 20%, #1C8C95, var(--mbi-froid-deep) 70%);
}
.mbi-overlay.open .mbi-temp-choice.chaud { animation: mbi-drift-warm 6s ease-in-out infinite; }
.mbi-overlay.open .mbi-temp-choice.froid { animation: mbi-drift-cold 6s ease-in-out infinite; }
@keyframes mbi-drift-warm {
	0%, 100% { background-position: 30% 20%; }
	50% { background-position: 40% 35%; }
}
@keyframes mbi-drift-cold {
	0%, 100% { background-position: 70% 20%; }
	50% { background-position: 60% 35%; }
}
.mbi-overlay .mbi-temp-choice:hover { filter: brightness(1.12); }

.mbi-overlay-close {
	position: absolute;
	top: 18px; right: 18px;
	z-index: 5;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.18);
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	backdrop-filter: blur(4px);
}
.mbi-overlay-title {
	position: absolute;
	top: 22px; left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-family: var(--mbi-font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .12em;
	opacity: .8;
	z-index: 5;
	text-align: center;
}

@media (max-width: 640px) {
	.mbi-scene.mbi-scene-temp { flex-direction: column; }
}

/* ---------- Étape « choix de saveur » ---------- */
.mbi-saveur-scene {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	overflow-y: auto;
	background: radial-gradient(circle at 50% 0%, #262b2f, #14171a 70%);
}
.mbi-overlay-title-static {
	color: #fff;
	text-align: center;
	font-family: var(--mbi-font-display);
	font-size: clamp(22px, 4vw, 32px);
	font-weight: 600;
	margin: 0 0 26px;
}
.mbi-overlay-title-static span {
	display: block;
	font-family: var(--mbi-font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255,255,255,.6);
	margin-top: 6px;
}
.mbi-saveur-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
	max-width: 760px;
	width: 100%;
}
.mbi-saveur-card {
	background: rgba(255,255,255,.06);
	border: 2px solid transparent;
	border-radius: 16px;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	color: #fff;
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.mbi-saveur-card:hover, .mbi-saveur-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--mbi-saveur-color, #fff);
	background: rgba(255,255,255,.1);
}
.mbi-saveur-card img {
	width: 64px; height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,.2);
}
.mbi-saveur-swatch {
	width: 64px; height: 64px;
	border-radius: 50%;
	display: block;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.mbi-saveur-nom {
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* ---------- Fiche détail ---------- */
.mbi-detail-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 18, .45);
	z-index: 90;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.mbi-detail-backdrop.open { opacity: 1; pointer-events: auto; }

.mbi-detail {
	position: fixed;
	z-index: 95;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 100%);
	width: min(520px, 100%);
	max-height: 86vh;
	overflow-y: auto;
	background: var(--mbi-surface);
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -20px 60px -20px rgba(0,0,0,.35);
	transition: transform .38s cubic-bezier(.2,.8,.2,1);
	border-top: 4px solid var(--mbi-ink);
}
.mbi-detail.open { transform: translate(-50%, 0); }
.mbi-detail.temp-chaud { border-top-color: var(--mbi-chaud); }
.mbi-detail.temp-froid { border-top-color: var(--mbi-froid); }

@media (min-width: 720px) {
	.mbi-detail {
		bottom: auto;
		top: 50%;
		transform: translate(-50%, -45%) scale(.96);
		opacity: 0;
		border-radius: 22px;
		max-height: 80vh;
	}
	.mbi-detail.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.mbi-detail-handle {
	width: 40px; height: 4px;
	background: var(--mbi-line);
	border-radius: 999px;
	margin: 10px auto 0;
}
@media (min-width: 720px) { .mbi-detail-handle { display: none; } }

.mbi-detail-close {
	position: absolute;
	top: 14px; right: 14px;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--mbi-line);
	background: var(--mbi-surface);
	font-size: 18px;
	cursor: pointer;
}

.mbi-detail-image { width: 100%; height: 220px; object-fit: cover; background: var(--mbi-froid-tint); }
.mbi-detail-body { padding: 20px 24px 30px; }
.mbi-detail-eyebrow {
	font-family: var(--mbi-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--mbi-ink-soft);
	margin: 0 0 6px;
}
.mbi-detail-title { font-family: var(--mbi-font-display); font-size: 28px; font-weight: 700; margin: 0 0 10px; }
.mbi-detail-desc { font-size: 15px; line-height: 1.6; color: var(--mbi-ink-soft); margin: 0 0 20px; }
.mbi-detail-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--mbi-line); }
.mbi-detail-price { font-family: var(--mbi-font-mono); font-size: 26px; font-weight: 700; }

.mbi-detail-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.mbi-detail-temp-pill,
.mbi-detail-saveur-pill {
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mbi-detail-temp-pill.chaud { background: var(--mbi-chaud-tint); color: var(--mbi-chaud-deep); }
.mbi-detail-temp-pill.froid { background: var(--mbi-froid-tint); color: var(--mbi-froid-deep); }
.mbi-detail-saveur-pill {
	background: var(--mbi-froid-tint);
	background: color-mix(in srgb, var(--mbi-saveur-color, #C1531A) 16%, white);
	color: var(--mbi-saveur-color, #C1531A);
}
.mbi-swatch-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--mbi-saveur-color, #C1531A);
	display: inline-block;
}

.mbi-switch-temp {
	font-size: 13px;
	font-weight: 600;
	color: var(--mbi-ink);
	background: var(--mbi-bg);
	border: 1px solid var(--mbi-line);
	border-radius: 999px;
	padding: 10px 16px;
	cursor: pointer;
	transition: background .2s ease;
}
.mbi-switch-temp:hover { background: var(--mbi-line); }

/* ---------- Suppléments (fiche détail) ---------- */
.mbi-supplements {
	border-top: 1px solid var(--mbi-line);
	padding-top: 16px;
	margin-bottom: 4px;
}
.mbi-supplements-title {
	font-weight: 600;
	font-size: 14px;
	margin: 0 0 10px;
}
.mbi-supplement-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	cursor: pointer;
	border-radius: 8px;
	transition: background .15s ease;
}
.mbi-supplement-row:hover { background: var(--mbi-bg); }
.mbi-supplement-row img {
	width: 32px; height: 32px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--mbi-line);
}
.mbi-swatch-sm {
	width: 32px; height: 32px;
	border-radius: 8px;
	background: var(--mbi-froid-tint);
	display: block;
}
.mbi-supplement-nom { flex: 1; font-size: 14px; }
.mbi-supplement-prix {
	font-family: var(--mbi-font-mono);
	font-size: 13px;
	color: var(--mbi-ink-soft);
}
.mbi-supplement-check {
	width: 18px; height: 18px;
	accent-color: var(--mbi-froid);
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	.mbi-view { padding: 18px 14px 40px; }
	.mbi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.mbi-section-title { font-size: 22px; }
	.mbi-card-image { height: 120px; }
}