/* =========================================================
   LP Béhar Modals — Frontend styles
   Adapté au thème Béhar :
     - Couleurs : primary #846f55 | titre #705b41 | text #5b4631
     - Font : grotesque, Arial, sans-serif
     - Border-radius : 0 (thème flat)
     - Transition : all 0.3s ease-in-out
   ========================================================= */

/* ----------------------------------------------------------
   Overlay
   ---------------------------------------------------------- */

.lp-modal-overlay {
	/* Positionnement */
	position: fixed;
	inset: 0;
	z-index: 999990;

	/* Centrage */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;

	/* Animation (état fermé) */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;

	/* Curseur */
	cursor: pointer;
}

/* L'attribut hidden neutralise l'overlay entièrement */
.lp-modal-overlay[hidden] {
	display: none !important;
}

/* État ouvert */
.lp-modal-overlay.lp-modal-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ----------------------------------------------------------
   Conteneur de la modale
   ---------------------------------------------------------- */

.lp-modal-container {
	position: relative;
	background: #fff;
	width: 100%;
	/* max-width est défini en inline depuis PHP */

	/* Scroll interne si le contenu est long */
	max-height: 90dvh;
	max-height: 90vh; /* fallback */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* Remettre le curseur normal dans la boîte */
	cursor: auto;

	/* Légère ombre pour détacher du fond */
	box-shadow: 0 8px 48px rgba(90, 60, 30, 0.18);

	/* Animation (état fermé) */
	transform: translateY(24px);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.lp-modal-visible .lp-modal-container {
	transform: translateY(0);
	opacity: 1;
}

/* Accent couleur thème en haut */
.lp-modal-container::before {
	content: "";
	display: block;
	height: 3px;
	background: #846f55;
}

/* ----------------------------------------------------------
   Bouton fermer (croix)
   ---------------------------------------------------------- */

.lp-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;

	background: transparent;
	border: none;
	color: #705b41;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.3s ease, color 0.3s ease;
	border-radius: 0; /* cohérent avec le thème flat */
	line-height: 1;
}

.lp-modal-close:hover,
.lp-modal-close:focus {
	opacity: 1;
	color: #4a2d13;
	outline: none;
}

.lp-modal-close svg {
	display: block;
	pointer-events: none;
}

/* ----------------------------------------------------------
   Corps de la modale (contenu Gutenberg)
   ---------------------------------------------------------- */

.lp-modal-body {
	padding: 2.5rem 2rem 2rem;
}

/* Réinitialisation légère pour les blocs Gutenberg */
.lp-modal-body > *:first-child {
	margin-top: 0;
}

.lp-modal-body > *:last-child {
	margin-bottom: 0;
}

/* Hérite de la palette thème */
.lp-modal-body h1,
.lp-modal-body h2,
.lp-modal-body h3,
.lp-modal-body h4,
.lp-modal-body h5,
.lp-modal-body h6 {
	color: #705b41;
}

.lp-modal-body a {
	color: #846f55;
}

.lp-modal-body a:hover {
	color: #4a2d13;
}

/* Boutons Gutenberg dans la modale */
.lp-modal-body .wp-block-buttons {
	margin-top: 1.5rem;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

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

	.lp-modal-container {
		max-height: 85dvh;
		max-height: 85vh;
		/* Slide depuis le bas sur mobile */
		transform: translateY(100%);
		border-radius: 0;
		width: 100%;
		max-width: 100% !important; /* override inline */
	}

	.lp-modal-visible .lp-modal-container {
		transform: translateY(0);
	}

	.lp-modal-body {
		padding: 2rem 1.25rem 1.5rem;
	}
}

/* ----------------------------------------------------------
   Lock scroll — appliqué via JS sur <body>
   La technique "position fixed" évite le bug de scroll
   iOS Safari sans faire sauter la page.
   ---------------------------------------------------------- */

body.lp-scroll-locked {
	overflow: hidden;
	position: fixed;
	width: 100%;
	/* top est positionné via JS : body.style.top = -scrollY + 'px' */
}