/* Coquille du popup : c'est ELLE qui dessine la carte visible (fond, bordure,
 * ombre, filet d'accent) — le formulaire Lead Manager embarqué s'affiche "à plat"
 * dedans (data-card="flush", cf. major-popups.js::appendEmbedContent + card-flush
 * dans lead-manager/_formulaire_default_style.html). Avant cette version, la
 * coquille était transparente et laissait l'embed dessiner sa propre carte : ça
 * créait un effet "carte dans la carte" (double bordure/ombre) ET laissait tout
 * élément propre à la coquille (bouton "Non merci", colonne image) flotter hors de
 * toute limite visuelle, puisque rien ne délimitait la carte pour eux — corrigé le
 * 2026-08-12 en même temps que l'ajout de la colonne image optionnelle.
 * `!important` sur le bouton/lien de fermeture : le thème du site applique des
 * styles globaux à tout <button>, y compris au survol (constaté : fond rouge du
 * thème sur le lien "Non merci") — même leçon que major-master-v2/CONTEXT.md sur
 * les couleurs de bouton fixées en dur côté thème.
 */

.mpp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(21, 22, 26, .55);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto; /* un seul scroll (l'overlay), jamais un scroll imbriqué dans la carte */
}

.mpp-overlay[hidden] {
	display: none;
}

.mpp-card {
	position: relative;
	width: 100%;
	/* Aligné sur le max-width de la mise en page compacte Lead Manager (640px,
	   cf. .layout-compact.page dans _formulaire_default_style.html) — un popup
	   plus étroit forcerait le formulaire à se resserrer plus qu'il n'a besoin. */
	max-width: 640px;
	margin: auto; /* centre verticalement même quand l'overlay scrolle */
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(21, 22, 26, .25);
	overflow: hidden; /* rogne les coins arrondis (image, filet d'accent) */
}

.mpp-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: #1B3B8F;
	z-index: 1;
}

.mpp-card.has-image {
	display: flex;
	align-items: stretch;
	max-width: 760px; /* colonne image en plus des 640px du formulaire */
}

.mpp-image-col {
	width: 38%;
	flex-shrink: 0;
	background: #F7F6F3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 20px;
	gap: 10px;
	overflow: hidden;
}

.mpp-image-col img {
	/* Vignette encadrée plutôt que plein cadre : quelle que soit la largeur du
	   popup (et donc de cette colonne), l'image garde ses proportions réelles
	   (~210×297, format A4 portrait des couvertures de guide) sans jamais être
	   recadrée — object-fit: contain + une largeur plafonnée, pas cover sur
	   toute la hauteur de la carte. */
	width: 100%;
	max-width: 190px;
	aspect-ratio: 210 / 297;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(21, 22, 26, .12);
	display: block;
}

.mpp-image-caption {
	text-align: center;
	font-size: 12.5px;
	color: #8C887F;
	font-family: system-ui, sans-serif;
}

/* Masquée à l'étape 2 du formulaire compact (questions selon le profil) :
   l'image aide surtout à la première impression ; une fois engagé dans le
   détail, mieux vaut laisser le formulaire respirer sur toute la largeur
   plutôt que de garder une colonne dont la hauteur ne suit plus du tout celle
   du formulaire (encarts conditionnels + listes de chips très variables selon
   le statut). Signalé par formulaire.js via l'évènement `lm-step-change`. */
.mpp-card.has-image.mpp-step-2 .mpp-image-col {
	display: none;
}
.mpp-card.has-image .mpp-card-body {
	flex: 1;
	min-width: 0;
}

.mpp-loading {
	padding: 60px 24px;
	text-align: center;
	color: #8C887F;
	font-family: system-ui, sans-serif;
	font-size: 14px;
}

.mpp-loading::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 12px;
	border: 3px solid #DCDAD3;
	border-top-color: #1B3B8F;
	border-radius: 50%;
	animation: mpp-spin .7s linear infinite;
}

@keyframes mpp-spin {
	to { transform: rotate(360deg); }
}

.mpp-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2; /* au-dessus du filet d'accent (.mpp-card::before, z-index: 1) */
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none !important;
	background: rgba(255, 255, 255, .92) !important;
	box-shadow: 0 1px 4px rgba(21, 22, 26, .18);
	border-radius: 50% !important;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: #6B6862 !important;
	padding: 0 !important;
}

.mpp-close:hover,
.mpp-close:focus-visible {
	background: #fff !important;
	color: #15161A !important;
}

.mpp-dismiss {
	display: block;
	text-align: center;
	margin: 12px 16px 16px;
	font-size: 13px;
	color: #8C887F !important;
	text-decoration: underline;
	cursor: pointer;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: auto;
	padding: 4px !important;
}

.mpp-dismiss:hover,
.mpp-dismiss:focus-visible {
	color: #15161A !important;
	background: transparent !important;
}

@media (max-width: 640px) {
	.mpp-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.mpp-card {
		max-width: none;
		margin: 0;
	}

	.mpp-card.has-image {
		max-width: none;
	}

	/* Pas de place pour une colonne décorative sur mobile — priorité au formulaire,
	   pas de hauteur supplémentaire ajoutée par l'image. */
	.mpp-image-col {
		display: none;
	}
}