/* Simple Popup – styles front. Les couleurs/tailles viennent des variables CSS définies dans les réglages. */

.smpp {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
}
.smpp *,
.smpp *::before,
.smpp *::after {
	box-sizing: border-box;
}
.smpp.smpp-visible {
	display: flex;
}
html.smpp-lock {
	overflow: hidden;
}

.smpp-overlay {
	position: absolute;
	inset: 0;
	background: var(--smpp-overlay);
}

.smpp-box {
	position: relative;
	width: 100%;
	max-width: var(--smpp-width);
	background: var(--smpp-bg);
	border-radius: var(--smpp-radius);
	box-shadow: var(--smpp-shadow);
}

.smpp-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	padding: var(--smpp-padding);
	border-radius: inherit;
}
/* Laisse de la place à la croix quand elle est à l'intérieur */
.smpp-close-inside .smpp-inner {
	padding-top: max(var(--smpp-padding), calc(var(--smpp-close-size) + 16px));
}

/* Image */
.smpp-image img {
	display: block;
	width: var(--smpp-img-width);
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--smpp-img-radius);
}

/* Texte */
.smpp-text {
	color: var(--smpp-text-color);
	font-size: var(--smpp-text-size);
	text-align: var(--smpp-text-align);
	line-height: 1.55;
	overflow-wrap: break-word;
}
.smpp-text h1, .smpp-text h2, .smpp-text h3,
.smpp-text h4, .smpp-text h5, .smpp-text h6,
.smpp-text p, .smpp-text li, .smpp-text strong {
	color: inherit;
}
.smpp-text h1 { font-size: 2em; line-height: 1.2; margin: 0 0 .5em; }
.smpp-text h2 { font-size: 1.6em; line-height: 1.25; margin: 0 0 .5em; }
.smpp-text h3 { font-size: 1.3em; line-height: 1.3; margin: 0 0 .5em; }
.smpp-text p { margin: 0 0 .8em; font-size: 1em; }
.smpp-text > :first-child { margin-top: 0; }
.smpp-text > :last-child { margin-bottom: 0; }
.smpp-text a { color: inherit; text-decoration: underline; }

/* Bouton */
.smpp-actions {
	display: flex;
	justify-content: var(--smpp-btn-justify);
}
.smpp .smpp-btn {
	display: inline-block;
	margin: 0;
	padding: var(--smpp-btn-padding);
	border: 0;
	border-radius: var(--smpp-btn-radius);
	background: var(--smpp-btn-bg);
	color: var(--smpp-btn-color);
	font-family: inherit;
	font-size: var(--smpp-btn-size);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s ease;
}
.smpp .smpp-btn:hover,
.smpp .smpp-btn:focus-visible {
	background: var(--smpp-btn-hover);
	color: var(--smpp-btn-color);
	text-decoration: none;
}
.smpp-btn-full .smpp-btn {
	width: 100%;
}

/* Bouton de fermeture */
.smpp .smpp-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--smpp-close-size) + 12px);
	height: calc(var(--smpp-close-size) + 12px);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--smpp-close-bg);
	color: var(--smpp-close-color);
	font-family: Arial, sans-serif;
	font-size: var(--smpp-close-size);
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: opacity .2s ease;
}
.smpp .smpp-close:hover {
	opacity: .7;
	background: var(--smpp-close-bg);
	color: var(--smpp-close-color);
}
.smpp .smpp-close:focus-visible,
.smpp .smpp-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.smpp-close-outside .smpp-close {
	top: 0;
	right: 0;
	transform: translate(35%, -35%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Animations */
.smpp-visible .smpp-overlay { animation: smpp-fade .3s ease both; }
.smpp-anim-fade.smpp-visible .smpp-box { animation: smpp-fade .3s ease both; }
.smpp-anim-zoom.smpp-visible .smpp-box { animation: smpp-zoom .3s cubic-bezier(.2, .9, .3, 1.2) both; }
.smpp-anim-slide.smpp-visible .smpp-box { animation: smpp-slide .35s ease-out both; }
.smpp-anim-none.smpp-visible .smpp-overlay { animation: none; }

@keyframes smpp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes smpp-zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes smpp-slide { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	.smpp .smpp-box,
	.smpp .smpp-overlay {
		animation: none !important;
	}
}