/* Modale « Demande de brochure » des fiches formation
   (classes/class-demande-brochure.php, assets/js/demande-brochure.js).

   <dialog> natif ouvert avec show() (non modal) pour laisser le défi hCaptcha,
   injecté dans <body>, passer au-dessus : le placement, le fond assombri et la
   page figée que showModal() fournissait sont refaits ici, sous la classe
   .demande-brochure-ouverte posée sur <html> par le JS (qui rend aussi le
   reste du site inerte).
   Champs du formulaire : styles communs de gravity-forms.css, resserrés ici
   comme ceux de « Faites-vous rappeler » (#gform_wrapper_4). */

/* Centrée dans la fenêtre comme en mode modal (position: fixed, inset: 0 et
   margin: auto, avec la hauteur fit-content du navigateur).
   z-index : au-dessus du header fixé (10), du « Retour en haut » et du CTA
   mobile (50), sous le défi hCaptcha (z-index 9999999999999 en inline,
   ramené par le navigateur au maximum 2147483647 — relevé dans
   js.hcaptcha.com/1/api.js le 03/11/2026). La barre d'admin (99999, visible
   connecté seulement) reste au-dessus, mais inerte. */
.demande-brochure {
	position: fixed;
	inset: 0;
	z-index: 1000;
	margin: auto;
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 40rem;
	max-height: calc(100dvh - 2rem);
	padding: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radius--m);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--black);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Fond assombri : remplace ::backdrop, qui n'existe qu'en mode modal.
   Juste sous la modale (1000), au-dessus du reste du site. */
.demande-brochure-ouverte body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 999;
	background-color: rgb(25 37 72 / 0.6); /* black #192548 */
}

/* Page figée derrière la modale ouverte */
html.demande-brochure-ouverte {
	overflow: hidden;
}

/* Croix : icône en masque, à la couleur du texte (zone cliquable 44px) */
.demande-brochure__close {
	position: absolute;
	top: var(--wp--preset--spacing--10);
	right: var(--wp--preset--spacing--10);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: none;
	color: var(--wp--preset--color--black);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.demande-brochure__close::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../img/croix.svg") no-repeat center / contain;
	mask: url("../img/croix.svg") no-repeat center / contain;
}

.demande-brochure__close:hover,
.demande-brochure__close:focus-visible {
	background-color: var(--wp--preset--color--grey);
	color: var(--wp--preset--color--primary);
}

.demande-brochure__close:not(:focus-visible) {
	outline: none;
}

/* Titre : place réservée à droite pour la croix */
.demande-brochure__title {
	margin: 0;
	padding-right: 2.75rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--l);
	line-height: var(--wp--custom--line-height--l);
}

.demande-brochure__formation {
	margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
}

.demande-brochure .gfield {
	margin-bottom: var(--wp--preset--spacing--10) !important;
}

/* Mobile : modale resserrée pour tenir sans défilement interne sur un
   téléphone courant, widget hCaptcha (303 × 78px) compris. Marges réduites
   à 0.5rem autour et padding à 1.25rem : la largeur utile reste ≥ 303px
   dès 360px d'écran, sinon le widget déborderait en largeur. */
@media (width <= 600px) {
	.demande-brochure {
		width: calc(100% - 1rem);
		max-height: calc(100dvh - 1rem);
		padding: 1.25rem;
	}

	.demande-brochure__formation {
		margin: 0.25rem 0 var(--wp--preset--spacing--10);
	}

	.demande-brochure .gform_required_legend {
		margin: 0 0 var(--wp--preset--spacing--10);
	}

	.demande-brochure .gfield_label,
	.demande-brochure .ginput_container_consent label {
		line-height: 1.4;
	}

	/* 44px : hauteur minimale confortable au doigt. !important : la règle
	   des champs de gravity-forms.css est bien plus spécifique (:not() ×6). */
	.demande-brochure .ginput_container input:not([type="checkbox"]):not([type="radio"]) {
		height: 44px !important;
	}

	.demande-brochure .gform_footer {
		margin-top: var(--wp--preset--spacing--10) !important;
	}

	/* .gform_wrapper : passer devant la marge de 8px de Gravity Forms
	   (.gform_wrapper.gravity-theme .gform_footer button, chargée après) */
	.demande-brochure .gform_wrapper .gform_footer .gform_button {
		height: 44px;
		margin-bottom: 0;
	}
}