/* Popup promotionnel — Garage Méca-Pro */
.mp-promo, .mp-promo *{ box-sizing: border-box; }

.mp-promo{
	position: fixed;
	inset: 0;
	z-index: 99990;               /* sous la bannière de témoins (99999) */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	background: rgba(8, 14, 28, .78);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	font-family: Arial, Helvetica, sans-serif;
}
.mp-promo.is-open{ display: flex; animation: mp-promo-fond .25s ease-out; }

.mp-promo__boite{
	position: relative;
	width: 100%;
	/* l'image (3:2) + la barre de boutons doivent tenir dans la hauteur de l'écran */
	max-width: min(900px, calc((100vh - 32px - 64px) * 1.5));
	max-width: min(900px, calc((100dvh - 32px - 64px) * 1.5));
	background: #0b1a33;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.55);
	animation: mp-promo-entree .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes mp-promo-fond{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes mp-promo-entree{ from{ opacity: 0; transform: translateY(18px) scale(.97); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
	.mp-promo.is-open, .mp-promo__boite{ animation: none; }
}

.mp-promo__boite:focus{ outline: none; }

.mp-promo__image{
	display: block;
	position: relative;
	line-height: 0;
}
.mp-promo__image img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
}

/* Bouton de fermeture, coin supérieur droit */
.mp-promo__fermer{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.9);
	padding: 0;
	cursor: pointer;
	background: rgba(11, 26, 51, .85);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	transition: transform .15s, background .15s;
	z-index: 2;
}
.mp-promo__fermer:hover{ background: #c8102e; transform: scale(1.08); }
.mp-promo__fermer:focus-visible{ outline: 3px solid #ffcc00; outline-offset: 3px; }
.mp-promo__fermer svg{ width: 20px; height: 20px; }

/* Barre d'actions sous l'image */
.mp-promo__actions{
	display: flex;
	gap: 10px;
	padding: 12px;
	background: #0b1a33;
}
.mp-promo__btn{
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 6px;
	font: bold 16px Arial, Helvetica, sans-serif;
	text-decoration: none !important;
	cursor: pointer;
	border: 2px solid transparent;
	white-space: nowrap;
	transition: background .15s, border-color .15s;
}
.mp-promo__btn svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.mp-promo__btn--appel{ background: #e3161b; color: #fff !important; }
.mp-promo__btn--appel:hover{ background: #c11015; }
.mp-promo__btn:focus-visible{ outline: 3px solid #ffcc00; outline-offset: 2px; }

/* Téléphone */
@media (max-width: 560px){
	.mp-promo{ padding: 10px; }
	.mp-promo__boite{ border-radius: 10px; max-width: 100%; }
	.mp-promo__fermer{ top: 6px; right: 6px; width: 40px; height: 40px; }
	.mp-promo__actions{ flex-direction: column; gap: 8px; padding: 10px; }
	.mp-promo__btn{ font-size: 16px; min-height: 48px; }
}

/* Téléphone à l'horizontale : boutons côte à côte, image la plus grande possible */
@media (max-height: 500px) and (orientation: landscape){
	.mp-promo{ padding: 8px; }
	.mp-promo__boite{ max-width: calc((100vh - 16px - 56px) * 1.5); max-width: calc((100dvh - 16px - 56px) * 1.5); }
	.mp-promo__actions{ padding: 6px 8px; }
	.mp-promo__btn{ min-height: 40px; font-size: 14px; }
}

body.mp-promo-ouvert{ overflow: hidden; }