/*
 * Pop-up du site - Sainte Marie de Saint Sernin.
 * Meme feuille pour le site public et pour l apercu de l espace.
 *
 *   --affiche  image seule, en grand (affiche d evenement)
 *   --carte    image en tete, puis titre, texte et bouton
 */

.smss-pop {
	--pop-nv: #27357f;
	--pop-nv-f: #1c2860;
	--pop-titre: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pop-corps: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--pop-corps);
}

.smss-pop[hidden] { display: none !important; }

.smss-pop *,
.smss-pop *::before,
.smss-pop *::after { box-sizing: border-box; }

.smss-pop__voile {
	position: absolute;
	inset: 0;
	background: rgba(16, 22, 64, .62);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	animation: smss-pop-fondu .3s ease both;
}

.smss-pop__boite {
	position: relative;
	width: auto;
	max-width: min(900px, 100%);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 40px 90px -30px rgba(5, 10, 40, .8);
	animation: smss-pop-entree .42s cubic-bezier(.2, .9, .25, 1.05) both;
	outline: none;
}

/* ---------------------------------------------------------- Fermeture */

.smss-pop__fermer {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	color: var(--pop-nv);
	box-shadow: 0 8px 22px -8px rgba(5, 10, 40, .55);
	cursor: pointer;
	transition: background .2s, color .2s, transform .25s;
}

.smss-pop__fermer svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.smss-pop__fermer:hover { background: var(--pop-nv); color: #fff; transform: rotate(90deg); }
.smss-pop__fermer:focus-visible { outline: 3px solid #e8a900; outline-offset: 2px; }

/* -------------------------------------------------------------- Affiche */

.smss-pop__boite--affiche { background: #fff; }

.smss-pop__visuel { line-height: 0; }
.smss-pop__visuel a { display: block; }

.smss-pop__boite--affiche .smss-pop__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	margin: 0 auto;
	object-fit: contain;
}

/* Avec un lien : bandeau blanc sous l image, bouton centre. */
.smss-pop__boite--affiche:has(.smss-pop__barre) .smss-pop__image {
	max-height: calc(100vh - 130px);
	max-height: calc(100dvh - 130px);
}

.smss-pop__barre {
	display: flex;
	justify-content: center;
	padding: 16px 18px 18px;
	background: #fff;
}

/* ---------------------------------------------------------------- Carte */

.smss-pop__boite--carte { width: 540px; }

.smss-pop__boite--carte .smss-pop__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 44vh;
	object-fit: cover;
}

.smss-pop__corps { padding: 28px 32px 32px; }

.smss-pop__filet {
	display: block;
	width: 64px;
	height: 4px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		#f4c20d 0 16.66%, #3b6fe0 16.66% 33.33%, #6cbf3f 33.33% 50%,
		#e2363b 50% 66.66%, #9b59c6 66.66% 83.33%, #e8487f 83.33% 100%);
}

.smss-pop__titre {
	margin: 0 0 10px;
	padding-right: 30px;
	font-family: var(--pop-titre);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.01em;
	color: var(--pop-nv);
	text-transform: none;
}

.smss-pop__boite--carte .smss-pop__visuel + .smss-pop__corps .smss-pop__titre { padding-right: 0; }

.smss-pop__texte {
	margin: 0 0 22px;
	font-family: var(--pop-corps);
	font-size: 16px;
	line-height: 1.65;
	color: #4c5261;
}

.smss-pop__texte:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Bouton */

.smss-pop .smss-pop__bouton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--pop-nv);
	color: #fff;
	font-family: var(--pop-titre);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 14px 26px -14px rgba(39, 53, 127, .9);
	transition: background .25s, transform .25s;
}

.smss-pop .smss-pop__bouton:hover,
.smss-pop .smss-pop__bouton:focus { background: var(--pop-nv-f); color: #fff; transform: translateY(-2px); }

.smss-pop__bouton svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s;
}

.smss-pop__bouton:hover svg { transform: translateX(3px); }

/* Page figee derriere la fenetre. */
html.smss-pop-ouverte,
html.smss-pop-ouverte body { overflow: hidden !important; }

/* ------------------------------------------------------------ Animations */

.smss-pop.is-sortie .smss-pop__voile { animation: smss-pop-fondu .22s ease reverse both; }
.smss-pop.is-sortie .smss-pop__boite { animation: smss-pop-sortie .22s ease both; }

@keyframes smss-pop-fondu {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes smss-pop-entree {
	from { opacity: 0; transform: translateY(18px) scale(.96); }
	to { opacity: 1; transform: none; }
}

@keyframes smss-pop-sortie {
	to { opacity: 0; transform: translateY(10px) scale(.97); }
}

/* ------------------------------------------------------------- Adaptatif */

@media (max-width: 640px) {
	.smss-pop { padding: 14px; }

	.smss-pop__boite {
		max-height: calc(100vh - 28px);
		max-height: calc(100dvh - 28px);
		border-radius: 16px;
	}

	.smss-pop__boite--affiche .smss-pop__image {
		max-height: calc(100vh - 28px);
		max-height: calc(100dvh - 28px);
	}

	.smss-pop__boite--affiche:has(.smss-pop__barre) .smss-pop__image {
		max-height: calc(100vh - 110px);
		max-height: calc(100dvh - 110px);
	}

	.smss-pop__boite--carte { width: 100%; }
	.smss-pop__boite--carte .smss-pop__image { max-height: 36vh; }
	.smss-pop__corps { padding: 22px 22px 24px; }
	.smss-pop__titre { font-size: 21px; }
	.smss-pop__texte { font-size: 15.5px; }

	.smss-pop .smss-pop__bouton { width: 100%; justify-content: center; }

	.smss-pop__fermer { top: 10px; right: 10px; width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.smss-pop__voile,
	.smss-pop__boite,
	.smss-pop.is-sortie .smss-pop__voile,
	.smss-pop.is-sortie .smss-pop__boite { animation: none; }
	.smss-pop__fermer:hover { transform: none; }
}