/*! My Custom Popup — front-end. Toutes les règles sont préfixées .mcpu- pour éviter les conflits avec le thème. */
html.mcpu-lock { overflow: hidden; }

.mcpu-root {
	position: fixed; inset: 0; z-index: 2147483000;
	display: flex; align-items: center; justify-content: center;
	padding: 16px; pointer-events: none;
	font-family: inherit; font-size: 16px; line-height: 1.5; color: #1f2937; text-align: left;
}
.mcpu-root[hidden], .mcpu-root [hidden] { display: none !important; }
.mcpu-root *, .mcpu-root *::before, .mcpu-root *::after { box-sizing: border-box; }
.mcpu-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.mcpu-pos-bottom-left { align-items: flex-end; justify-content: flex-start; }

.mcpu-overlay {
	position: absolute; inset: 0; background: rgba(15, 23, 42, .55);
	opacity: 0; transition: opacity .25s ease; pointer-events: auto;
}
.mcpu-modal {
	position: relative; width: 100%; max-width: var(--mcpu-width, 480px);
	max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
	overflow-y: auto; overscroll-behavior: contain;
	background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
	opacity: 0; transform: translateY(16px) scale(.98);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: auto; outline: 0;
}
.mcpu-visible .mcpu-overlay, .mcpu-visible .mcpu-modal { opacity: 1; }
.mcpu-visible .mcpu-modal { transform: none; }
.mcpu-no-overlay .mcpu-modal { box-shadow: 0 12px 40px rgba(15, 23, 42, .22); }

.mcpu-root .mcpu-close {
	position: absolute; top: 8px; right: 8px; z-index: 1;
	width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: none;
	color: #374151; font: 400 24px/36px Arial, sans-serif; text-align: center; cursor: pointer;
}
.mcpu-root .mcpu-close:hover, .mcpu-root .mcpu-close:focus-visible { background: #f3f4f6; color: #111827; }

.mcpu-root .mcpu-image {
	display: block; width: 100%; height: auto; max-height: 240px; margin: 0;
	object-fit: cover; border-radius: 14px 14px 0 0;
}
.mcpu-body { padding: 28px 24px 24px; }
.mcpu-root .mcpu-title {
	margin: 0 0 8px; padding: 0; color: #111827;
	font-family: inherit; font-size: 1.5em; font-weight: 700; line-height: 1.25;
	letter-spacing: normal; text-transform: none;
}
.mcpu-content { margin: 0 0 16px; color: #4b5563; font-size: .95em; }
.mcpu-content p { margin: 0 0 .6em; }
.mcpu-content > :last-child { margin-bottom: 0; }
.mcpu-price { margin: 0 0 16px; font-size: 1.15em; font-weight: 700; color: #111827; }

.mcpu-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.mcpu-root .mcpu-input {
	display: block; width: 100%; height: auto; min-height: 46px; margin: 0; padding: 10px 14px;
	border: 1px solid #d1d5db; border-radius: 8px; background: #fff; box-shadow: none; outline: 0;
	color: #111827; font: inherit; font-size: 16px; line-height: 1.4;
	-webkit-appearance: none; appearance: none;
}
.mcpu-root .mcpu-input:focus { border-color: var(--mcpu-accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); }

.mcpu-root .mcpu-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: 46px; margin: 0; padding: 12px 18px;
	border: 0; border-radius: 8px; background: var(--mcpu-accent, #2563eb); box-shadow: none;
	color: #fff; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2;
	text-align: center; text-decoration: none; text-transform: none; letter-spacing: normal;
	cursor: pointer; transition: filter .15s ease;
}
.mcpu-root .mcpu-btn:hover { filter: brightness(1.08); color: #fff; }
.mcpu-root .mcpu-btn:focus-visible { outline: 3px solid var(--mcpu-accent, #2563eb); outline-offset: 2px; }
.mcpu-root .mcpu-btn[disabled] { opacity: .7; cursor: wait; }
.mcpu-root .mcpu-btn.mcpu-btn-ghost {
	width: auto; min-height: 36px; padding: 6px 14px;
	border: 1px solid currentColor; background: transparent; color: var(--mcpu-accent, #2563eb); font-size: 14px;
}

.mcpu-consent { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #6b7280; font-size: .8em; cursor: pointer; }
.mcpu-root .mcpu-consent input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; }
.mcpu-consent a { color: inherit; text-decoration: underline; }
.mcpu-msg { margin: 0; color: #b91c1c; font-size: .875em; }
.mcpu-msg:empty { display: none; }

.mcpu-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mcpu-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.mcpu-success { text-align: center; }
.mcpu-success-text { margin: 0 0 12px; color: #065f46; font-weight: 600; }
.mcpu-coupon {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
	padding: 14px; border: 2px dashed var(--mcpu-accent, #2563eb); border-radius: 10px; background: #f9fafb;
}
.mcpu-coupon-label { width: 100%; color: #6b7280; font-size: .75em; letter-spacing: .06em; text-transform: uppercase; }
.mcpu-root .mcpu-coupon-code {
	padding: 0; background: none; color: #111827;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.3em; font-weight: 700;
}

@media (max-width: 480px) {
	.mcpu-body { padding: 24px 18px 18px; }
	.mcpu-pos-bottom-right, .mcpu-pos-bottom-left { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.mcpu-overlay, .mcpu-modal { transition: none; }
}