/*
 * Layout only - colors, fonts, borders and focus/hover states for inputs,
 * checkboxes and the submit button intentionally come from the site's own
 * Bootstrap classes (form-control, form-check/-input/-label, btn/btn-primary),
 * already loaded template-wide, so this module always matches whatever the
 * template defines for them rather than a second, separately-maintained set
 * of colors baked in here.
 */

.mod-newsletter-prospect {
	/* Container queries (below), not viewport media queries, drive both
	   collapses - the module can just as easily end up in a narrow sidebar
	   on a wide screen as it can fill a wide position on a narrow one, and
	   only the module's own rendered width tells us which. Fills its
	   position's full width (e.g. the dedicated #newsletter position inside
	   #conteneur5, a full-bleed .doo-s-container) rather than capping at a
	   fixed max-width - no reason to leave the rest of a wide, dedicated
	   position empty. */
	container-type: inline-size;
	container-name: newsletter-prospect;
	width: 100%;
	padding: 1.5rem;
	box-sizing: border-box;
}

/* Three blocks: intro | fields | checks + submit. */
.mod-newsletter-prospect__form {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: 1.75rem;
	align-items: start;
}

.mod-newsletter-prospect__intro-image {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 1rem;
}

.mod-newsletter-prospect__intro {
	margin: 0;
	text-align: center;
}

/* A hand-typed pre_text override may contain its own <p> tags with the
   browser's default paragraph margins - trim the outer ones so the block
   doesn't start/end with extra gap inside the grid cell. */
.mod-newsletter-prospect__intro > *:first-child {
	margin-top: 0;
}

.mod-newsletter-prospect__intro > *:last-child {
	margin-bottom: 0;
}

/* Fields block: its own label/input table alignment, nested inside the
   3-column layout. */
.mod-newsletter-prospect__col--fields {
	container-type: inline-size;
	container-name: newsletter-prospect-fields;
	display: grid;
	/* Fixed (not max-content) so the longest label ("E-mail professionnel")
	   wraps onto a second line instead of stretching the whole column to fit
	   it on one - the shorter labels still fit on a single line at this
	   width. */
	grid-template-columns: 10rem minmax(0, 1fr);
	column-gap: 1rem;
	row-gap: 0.9rem;
	align-items: center;
}

.mod-newsletter-prospect__field {
	display: contents;
}

.mod-newsletter-prospect__field .form-label {
	grid-column: 1;
	text-align: right;
	margin: 0;
	font-weight: 600;
}

.mod-newsletter-prospect__field .form-control {
	grid-column: 2;
	width: 100%;
	/* Fully transparent background (site default is opaque #ffffff), so
	   whatever is behind the field shows through completely. */
	background-color: transparent;
}

/* Checks block: the two checkboxes plus the submit button, stacked. */
.mod-newsletter-prospect__col--checks {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mod-newsletter-prospect__submit {
	align-self: start;
	margin-top: 0.25rem;
}

/* Google's terms allow hiding the floating "Protected by reCAPTCHA" badge
   only if its required attribution text is shown in the UI instead - see
   the reCAPTCHA notice paragraph below and tmpl/default.php. Not scoped to
   this module (the badge is appended straight to <body> by Google's script,
   outside .mod-newsletter-prospect), but harmless to keep unconditional
   since it only ever matches when reCAPTCHA's script is actually loaded. */
.grecaptcha-badge {
	visibility: hidden;
}

.mod-newsletter-prospect__recaptcha-notice {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: #6c757d;
}

.mod-newsletter-prospect__recaptcha-notice a {
	color: inherit;
	text-decoration: underline;
}

/* No color/background override here on purpose. The template's own legacy
   ".button, button, button.btn, input.btn, .btn" rule (template.css) beats
   ".btn-primary" on specificity, so EVERY button sitewide - including the
   real "Envoyer" button on the actual contact form (com_fabrik, class="btn
   btn-primary button envoyer", no button-specific override of its own)
   - renders with that rule's grey background/5px radius/gold hover, not
   .btn-primary's navy. A previous version of this file added a targeted
   override to force navy, which made this button the only one on the site
   that *didn't* match - removed, so it now inherits the exact same rule
   every other button on the site does. */

/* Outer collapse: the three blocks stack once the module itself is narrow
   (a phone, or a narrow sidebar position regardless of screen size). */
@container newsletter-prospect (max-width: 640px) {
	.mod-newsletter-prospect__form {
		grid-template-columns: 1fr;
	}

	.mod-newsletter-prospect__submit {
		width: 100%;
	}
}

/* Inner collapse: label above input once the fields block itself is narrow -
   which it normally will be while the 3-block layout is active, since a
   third-width column rarely has room for label and input side by side. */
@container newsletter-prospect-fields (max-width: 360px) {
	.mod-newsletter-prospect__col--fields {
		grid-template-columns: 1fr;
	}

	.mod-newsletter-prospect__field .form-label {
		grid-column: 1;
		text-align: left;
		margin-bottom: 0.25rem;
	}

	.mod-newsletter-prospect__field .form-control {
		grid-column: 1;
	}
}