/**
 * Modale du formulaire Cerca.
 *
 * Fermee, la modale reste rendue (visibility) et non retiree du flux (display) :
 * l'iframe garde une boite de rendu, condition pour que l'application Cerca
 * mesure sa hauteur et emette son message de redimensionnement.
 */

.cerca-modale {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 32px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.cerca-modale.est-ouverte {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.cerca-modale__fond {
	position: fixed;
	inset: 0;
	background: rgba(16, 32, 72, 0.65);
}

/*
 * 532 px = les 500 px auxquels Cerca plafonne sa carte, plus ses 16 px de marge
 * de chaque cote. Au-dela, la carte ne s'elargit pas : on n'ajouterait que du
 * vide, et la marge grimperait a 60 px (d'ou l'effet de bloc dans un bloc).
 * A cette largeur la marge vaut 16 px a toutes les tailles d'ecran, ce qui rend
 * la position de la croix previsible, et la hauteur tombe de 1267 a 1139 px.
 *
 * La boite reste transparente : la carte visible est celle de Cerca, avec sa
 * propre ombre et son rayon de 6 px.
 */
.cerca-modale .cerca-modale__boite {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 532px;
	margin: auto;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/*
 * Specificite volontairement portee a (0,2,0) : le kit Elementor et le theme
 * enfant stylent l'element `button` et reprendraient la main sinon.
 */
/*
 * Centree sur le coin haut-droit de la carte Cerca : la boite deborde la carte
 * de 16 px, une croix de 40 px calee a -4 px se retrouve donc a cheval dessus.
 */
.cerca-modale .cerca-modale__fermer {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 40px;
	min-width: 0;
	height: 40px;
	padding: 0;
	font-family: inherit;
	font-size: 26px;
	font-weight: 400;
	line-height: 40px;
	color: #fff;
	text-transform: none;
	letter-spacing: normal;
	background: #102048;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transition: background 0.15s ease;
}

.cerca-modale .cerca-modale__fermer:hover,
.cerca-modale .cerca-modale__fermer:focus-visible {
	color: #fff;
	background: #e6007e;
}

.cerca-modale__cadre {
	display: block;
	width: 100%;
	min-height: 620px;
	border: 0;
	overflow: hidden;
}

/* Empeche le defilement de la page pendant que la modale est ouverte. */
body.cerca-verrou {
	overflow: hidden;
}

@media (max-width: 640px) {
	.cerca-modale {
		padding: 20px 12px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cerca-modale {
		transition: none;
	}
}