/*
 * Le Diamant Popups : position, largeur, ombre, overlay et bouton de fermeture.
 * Aucun autre style visuel : le contenu est stylé dans l'éditeur.
 * Variables injectées depuis les réglages : --ldp-overlay, --ldp-popin-w, --ldp-modal-w, --ldp-shadow.
 */

/* Neutralise les styles par défaut du navigateur sur <dialog>. */
dialog.ldp {
	box-sizing: border-box;
	max-width: calc(100vw - 32px);
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	overflow: auto;
	/* Sur le popup lui-même : overflow masquerait l'ombre d'un bloc intérieur. */
	box-shadow: var(--ldp-shadow, none);
	z-index: 99999;
}

dialog.ldp::backdrop {
	background: var(--ldp-overlay, rgba(0, 0, 0, 0.5));
}

/* Pop-in : coin inférieur droit. */
.ldp--popin {
	position: fixed;
	inset: auto 24px 24px auto;
	margin: 0;
	width: var(--ldp-popin-w, 380px);
}

/* Exit-intent : centré. */
.ldp--exit {
	position: fixed;
	inset: 0;
	margin: auto;
	width: var(--ldp-modal-w, 600px);
	height: fit-content;
}

.ldp__box {
	position: relative;
}

/* Bouton de fermeture. Sélecteur renforcé : neutralise le style de bouton du thème. */
dialog.ldp .ldp__close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 1;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	opacity: 0.6;
	cursor: pointer;
}

dialog.ldp .ldp__close:hover,
dialog.ldp .ldp__close:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	color: inherit;
	opacity: 1;
}

@media (max-width: 600px) {
	.ldp--popin {
		inset: auto 16px 16px 16px;
		width: auto;
	}
}