/**
 * BRED reskin for Gravity Forms.
 *
 * Scoped to forms that carry the `bred-gform` CSS class (wrapper becomes
 * `.bred-gform_wrapper`). Layers over the GF "orbital" theme to match the
 * BRED design (Figma: Ouvrir un compte funnel).
 *
 * Enqueued site-wide via bred_enqueue_front_assets — selectors are BRED-scoped
 * so it never touches non-BRED forms.
 */

.bred-gform_wrapper {
	--bred-navy: var(--wp--preset--color--primary-dark, #192a6b);
	--bred-blue: var(--wp--preset--color--primary, #0069a5);
	--bred-cyan-10: var(--wp--preset--color--accent-mg-10, #e5f9fe);
	--bred-border: var(--wp--preset--color--neutral-30, #d0d0d0);
	--bred-ink: var(--wp--preset--color--neutral-200, #141414);
	--bred-muted: var(--wp--preset--color--neutral-100, #636362);

	max-width: 600px;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	color: var(--bred-ink);
}

/* -- Per-page headings injected via HTML fields -- */
.bred-gform_wrapper .bred-gf-heading {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.1;
	text-align: center;
	color: var(--bred-ink);
}

.bred-gf-pagehead {
	text-align: center;
	margin-bottom: 8px;
}
.bred-gf-pagehead__eyebrow {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
}
.bred-gf-pagehead__sub {
	margin: 12px 0 0;
	font-weight: 700;
	color: var(--bred-ink);
}

/* -- Multi-page progress ("Étape X sur N" + gradient bar) -- */
.bred-gform_wrapper .bred-gf-progress {
	margin: 0 0 40px;
}
.bred-gform_wrapper .bred-gf-progress__label {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
}
.bred-gform_wrapper .bred-gf-progress__track {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--support-blue-15, #d9e2f2);
	overflow: hidden;
}
.bred-gform_wrapper .bred-gf-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--primary, #0069a5),
		var(--bred-navy)
	);
	transition: width 250ms ease;
}

/* -- Reassurance list (page 1) -- */
.bred-gf-reassurance {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
	text-align: center;
}
/* When bred-forms.js relocates the reassurance field below the step's
   navigation button (so "Continuer" sits directly under the fields), give it a
   little breathing room from the button above. */
.bred-gf-reassurance-below-nav {
	margin-top: 16px;
}
/* Icons are inline SVGs in the field content (GF's reset kills ::before). */
.bred-gform_wrapper .bred-gf-reassurance li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.bred-gform_wrapper .bred-gf-reassurance li svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* ===================================================================
   FIELDS — labels, inputs, descriptions
   =================================================================== */
/* Vertical rhythm between fields. Modern markup lays .gform_fields out as a
   CSS grid with its own row-gap (orbital defaults to a loose 40px), so we own
   the rhythm via that gap rather than a per-field margin (which would stack on
   top of the grid gap). */
.bred-gform_wrapper .gform_fields {
	row-gap: 28px !important;
}
.bred-gform_wrapper .gfield_label {
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md, 16px);
	color: var(--bred-ink);
	margin-bottom: 8px;
}

.bred-gform_wrapper input[type="text"],
.bred-gform_wrapper input[type="email"],
.bred-gform_wrapper input[type="tel"],
.bred-gform_wrapper input[type="number"],
.bred-gform_wrapper input[type="url"],
.bred-gform_wrapper textarea,
.bred-gform_wrapper select {
	width: 100%;
	box-sizing: border-box;
	/* !important + min-block-size so orbital's control sizing (~38px) can't
	   win — otherwise the inputs render short. */
	min-height: 54px !important;
	min-block-size: 54px !important;
	padding: 12px 10px;
	border: 1px solid var(--bred-border) !important;
	border-radius: 8px !important;
	background-color: #fff;
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	line-height: 1.4;
	color: var(--bred-ink);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bred-gform_wrapper input::placeholder,
.bred-gform_wrapper textarea::placeholder {
	color: #9a9a99;
}
.bred-gform_wrapper input:focus,
.bred-gform_wrapper textarea:focus,
.bred-gform_wrapper select:focus {
	outline: none;
	border-color: var(--bred-navy);
	box-shadow: 0 0 0 3px rgba(25, 42, 107, 0.12);
}

.bred-gform_wrapper .gfield_description {
	margin-top: 8px;
	color: var(--bred-muted);
	font-size: var(--wp--preset--font-size--sm, 14px);
	line-height: 1.4;
}
/* Required-field indicator: a navy asterisk (override orbital's red asterisk,
   which wins on specificity via .gfield_required_asterisk). */
.bred-gform_wrapper .gfield_required,
.bred-gform_wrapper .gfield_required_asterisk {
	color: var(--bred-navy) !important;
}
/* Modern markup adds a "« * » indique les champs nécessaires" legend; Figma omits it. */
.bred-gform_wrapper .gform_required_legend {
	display: none;
}

/* ===================================================================
   PAGE 1 — audience radio rendered as cards
   =================================================================== */
/* The audience field breaks out symmetrically wider than the 600px form (so 4
   cards sit on one row with single-line labels) using equal negative margins —
   this keeps it centred on the same axis as the title and button. */
@media (min-width: 768px) {
	.bred-gform_wrapper .bred-gf-cards {
		margin-inline: -60px;
	}
}
.bred-gform_wrapper .bred-gf-cards .gfield_radio {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 575.98px) {
	.bred-gform_wrapper .bred-gf-cards .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.bred-gform_wrapper .bred-gf-cards .gchoice {
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	border: 1px solid var(--bred-border);
	border-radius: 12px;
	padding: 24px 12px !important;
	min-height: 116px;
	text-align: center;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bred-gform_wrapper .bred-gf-cards .gchoice:hover { border-color: var(--bred-navy); }

/* Icon above each card label (mapped by choice order). */
.bred-gform_wrapper .bred-gf-cards .gchoice::before {
	font-family: "Phosphor";
	font-size: 28px;
	line-height: 1;
	color: var(--bred-navy);
}
.bred-gform_wrapper .bred-gf-cards .gchoice:nth-child(1)::before {
	content: "\e4c2";
}
.bred-gform_wrapper .bred-gf-cards .gchoice:nth-child(2)::before {
	content: "\e436";
}
.bred-gform_wrapper .bred-gf-cards .gchoice:nth-child(3)::before {
	content: "\e102";
}
.bred-gform_wrapper .bred-gf-cards .gchoice:nth-child(4)::before {
	content: "\e3e8";
}
/* Credit variant — 5 project cards, 3 columns (no breakout), project icons. */
.bred-gform_wrapper .bred-gf-cards--credit {
	margin-inline: 0 !important;
}
.bred-gform_wrapper .bred-gf-cards--credit .gfield_radio {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	max-width: 560px;
	margin-inline: auto;
}
@media (max-width: 575.98px) {
	.bred-gform_wrapper .bred-gf-cards--credit .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
.bred-gform_wrapper .bred-gf-cards--credit .gchoice:nth-child(1)::before {
	content: "\e2e2";
}
.bred-gform_wrapper .bred-gf-cards--credit .gchoice:nth-child(2)::before {
	content: "\e4b4";
}
.bred-gform_wrapper .bred-gf-cards--credit .gchoice:nth-child(3)::before {
	content: "\e62c";
}
.bred-gform_wrapper .bred-gf-cards--credit .gchoice:nth-child(4)::before {
	content: "\e2c2";
}
.bred-gform_wrapper .bred-gf-cards--credit .gchoice:nth-child(5)::before {
	content: "\e102";
}

.bred-gform_wrapper .bred-gf-cards input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.bred-gform_wrapper .bred-gf-cards .gchoice label {
	display: block;
	margin: 0;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--md, 16px);
	color: var(--bred-ink);
	cursor: pointer;
}
/* Card Radio — selected: cyan fill (#E5F9FE) + blue stroke (#0069A5). */
.bred-gform_wrapper .bred-gf-cards .gchoice:has(input[type="radio"]:checked) {
	background-color: var(--bred-cyan-10);
	border-color: var(--bred-blue);
	box-shadow: inset 0 0 0 1px var(--bred-blue);
}
.bred-gform_wrapper .bred-gf-cards .gchoice:has(input[type="radio"]:focus-visible) {
	box-shadow: 0 0 0 3px rgba(25, 42, 107, 0.18);
}

/* ===================================================================
   PAGE 2 — availability radios inside a cyan box
   =================================================================== */
/* The whole field is the cyan box; the label sits inside at the top. */
.bred-gform_wrapper .bred-gf-availability {
	display: flow-root; /* contain the floated legend below */
	background-color: var(--bred-cyan-10);
	border: 0;
	border-radius: 16px;
	padding: 24px;
}
/* The label is a <legend>; float it so it flows inside the box padding
   instead of rendering on the fieldset's top edge (same trick as the
   automatic block, replicated here since availability opts out of it). */
.bred-gform_wrapper .bred-gf-availability .gfield_label {
	float: left;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
}
.bred-gform_wrapper .bred-gf-availability .gfield_radio {
	clear: both;
	display: flex !important;
	flex-direction: column;
	gap: 10px !important;
	padding: 0;
	background: transparent;
}
/* Row height/padding kept in step with the text inputs (min-height 54px,
   12px 10px padding, 16px text) so the choices read as the same control. */
.bred-gform_wrapper .bred-gf-availability .gchoice {
	display: flex !important;
	align-items: center;
	gap: 12px !important;
	margin: 0;
	min-height: 54px;
	padding: 10px 14px !important;
	border: 1px solid var(--bred-border);
	border-radius: 12px;
	background-color: #fff;
}
.bred-gform_wrapper .bred-gf-availability input[type="radio"] {
	flex-shrink: 0;
	margin: 0;
	width: 20px;
	height: 20px;
	accent-color: var(--bred-navy);
}
.bred-gform_wrapper .bred-gf-availability .gchoice label {
	margin: 0;
	color: var(--bred-ink);
	font-size: var(--wp--preset--font-size--md, 16px);
	line-height: 1.4;
	cursor: pointer;
}
/* Card Radio — selected: cyan fill (#E5F9FE) + blue stroke (#0069A5). */
.bred-gform_wrapper .bred-gf-availability .gchoice:has(input[type="radio"]:checked) {
	background-color: var(--bred-cyan-10);
	border-color: var(--bred-blue);
	box-shadow: inset 0 0 0 1px var(--bred-blue);
}

/* ===================================================================
   AUTOMATIC — every vertical radio / (non-consent) checkbox field is a
   cyan box with the label INSIDE at the top and each option a white box.
   No per-field class needed; the icon-card (bred-gf-cards) and consent
   (bred-gf-consent) styles opt out. Applies on top of the specific
   bred-gf-availability / bred-gf-topics classes so those stay consistent.
   =================================================================== */
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability),
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) {
	display: flow-root; /* contain the floated legend below */
	background-color: var(--bred-cyan-10);
	border: 0;
	border-radius: 16px;
	padding: 24px;
}
/* A <legend> ignores the fieldset's padding-top and renders on the top edge
   (looks "outside" the box). Floating it strips that special rendering so it
   flows as a normal block inside the padding, with the options cleared below. */
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability) > .gfield_label,
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) > .gfield_label {
	float: left;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
}
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability) .gfield_radio,
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) .gfield_checkbox {
	clear: both;
}
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability) .gfield_radio,
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) .gfield_checkbox {
	display: flex !important;
	flex-direction: column;
	gap: 16px !important;
	padding: 0;
	background: transparent;
}
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability) .gchoice,
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) .gchoice {
	display: flex !important;
	align-items: center;
	gap: 16px !important;
	margin: 0;
	padding: 20px !important;
	border: 1px solid var(--bred-border);
	border-radius: 12px;
	background-color: #fff;
}
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability) .gchoice input,
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) .gchoice input {
	flex-shrink: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	accent-color: var(--bred-navy);
}
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability) .gchoice label,
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) .gchoice label {
	margin: 0;
	color: var(--bred-ink);
	font-size: var(--wp--preset--font-size--lg, 18px);
	cursor: pointer;
}
.bred-gform_wrapper .gfield--type-radio:not(.bred-gf-cards):not(.bred-gf-availability) .gchoice:has(input:checked),
.bred-gform_wrapper .gfield--type-checkbox:not(.bred-gf-cards):not(.bred-gf-consent) .gchoice:has(input:checked) {
	background-color: var(--bred-cyan-10);
	border-color: var(--bred-blue);
	box-shadow: inset 0 0 0 1px var(--bred-blue);
}

/* ===================================================================
   CONSENT — description above, inline checkbox
   =================================================================== */
.bred-gf-consent .gfield_description { margin-bottom: 12px; }
.bred-gform_wrapper .bred-gf-consent .gfield_checkbox .gchoice,
.bred-gform_wrapper .bred-gf-consent .gchoice {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}
/* Underlined links inside the privacy text / consent label. */
.bred-gform_wrapper .bred-gf-consent a,
.bred-gform_wrapper .bred-gf-consent .gfield_description a {
	color: var(--bred-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bred-gf-consent input[type="checkbox"] {
	margin-top: 2px;
	width: 20px;
	height: 20px;
	accent-color: var(--bred-navy);
	flex-shrink: 0;
}
.bred-gf-consent .gchoice label { margin: 0; line-height: 1.4; }

/* ===================================================================
   BUTTONS — submit / next (navy), previous (text link)
   =================================================================== */
.bred-gform_wrapper .gform_footer,
.bred-gform_wrapper .gform_page_footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}
.bred-gform_wrapper .gform_button,
.bred-gform_wrapper .gform_next_button,
.bred-gform_wrapper input[type="submit"],
.bred-gform_wrapper button[type="submit"] {
	order: 1; /* submit / next on top */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px !important;
	padding: 12px 32px !important;
	border: 0;
	border-radius: 8px !important;
	background-color: var(--bred-navy) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 16px);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 150ms ease;
}
.bred-gform_wrapper .gform_button:hover,
.bred-gform_wrapper .gform_next_button:hover,
.bred-gform_wrapper input[type="submit"]:hover {
	background-color: color-mix(in srgb, var(--bred-navy) 90%, #000);
}
/* "Retour" rendered as a centered text link below the submit (Figma). Inputs
   can't use ::before, so the arrow lives in the button label ("← Retour"). */
.bred-gform_wrapper .gform_previous_button {
	order: 3; /* below the submit (and the optional skip link at order 2) */
	min-height: 0 !important;
	padding: 4px 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--bred-navy) !important;
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 16px);
	text-decoration: underline !important;
	text-underline-offset: 4px;
	cursor: pointer;
	width: auto;
}

/* ===================================================================
   FOOTER NOTE — reassurance + legal line (HTML field below the consent)
   =================================================================== */
.bred-gf-footer-note {
	margin: 24px 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
}
.bred-gf-footer-note__line {
	margin: 0 0 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.bred-gf-footer-note__line svg { flex-shrink: 0; }
.bred-gf-legal {
	margin: 20px 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
}

/* ===================================================================
   VALIDATION
   =================================================================== */
.bred-gform_wrapper .gfield_error input,
.bred-gform_wrapper .gfield_error textarea,
.bred-gform_wrapper .gfield_error select {
	border-color: #d12f2f;
}
.bred-gform_wrapper .validation_message,
.bred-gform_wrapper .gform_validation_errors {
	color: #d12f2f;
	font-size: var(--wp--preset--font-size--sm, 14px);
}

/* The "Misaotra !" thank-you is now its own reusable block — see
   blocks/confirmation (bred/confirmation). Its styles live with the block. */

/* ===================================================================
   ESTIMATION DE CRÉDIT — amount field, skip link, project summary
   =================================================================== */
/* Amount input with a trailing "MGA" suffix. */
.bred-gform_wrapper .bred-gf-amount .ginput_container {
	position: relative;
}
.bred-gform_wrapper .bred-gf-amount .ginput_container::after {
	content: "MGA";
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	color: var(--bred-muted);
	font-size: var(--wp--preset--font-size--sm, 14px);
	pointer-events: none;
}
.bred-gform_wrapper .bred-gf-amount input {
	padding-right: 56px !important;
	font-weight: 700;
}

/* "Passer cette étape" skip link (inserted in the page footer by bred-forms.js).
   The footer is a flex column (submit order 1); place the skip just below it and
   force the text-link look over orbital's button styling. */
.bred-gform_wrapper .bred-gf-skip-step {
	order: 2 !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 4px auto 0 !important;
	padding: 4px 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--bred-navy) !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	cursor: pointer;
}

/* Project recap card on step 3 (filled by bred-forms.js). */
.bred-gf-credit-summary:empty {
	display: none;
}
.bred-gf-credit-summary {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 360px;
	margin: 0 auto 16px;
	padding: 16px 20px;
	border-radius: 16px;
	background-color: var(--wp--preset--color--accent-mg-10, #e5f9fe);
}
.bred-gf-credit-summary__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-mg-30, #b2ecfb);
	color: var(--bred-navy);
}
.bred-gf-credit-summary__project {
	margin: 0;
	font-weight: 700;
	color: var(--bred-ink);
}
.bred-gf-credit-summary__amount {
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
}
.bred-gf-credit-intro {
	max-width: 420px;
	margin: 0 auto 28px;
	text-align: center;
	font-weight: 700;
	color: var(--bred-ink);
}

/* ===================================================================
   FRAMEWORK OVERRIDES
   Modern markup + GF's "orbital" framework use highly specific rules;
   !important keeps these wins simple. (Figma pill/card padding above is also
   !important + more specific, so it still wins.)
   =================================================================== */
.bred-gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']) {
	padding: 12px 10px !important;
}
.bred-gform_wrapper .gfield_description {
	padding-top: 0 !important;
}

/* ===================================================================
   PRISE DE CONTACT — form-specific pieces
   =================================================================== */
/* Page 1 — 2 choice cards (vs the 4-up audience grid). No breakout; centered. */
.bred-gform_wrapper .bred-gf-cards--contact {
	margin-inline: 0;
}
/* Once the agency path is chosen, bred-forms.js flags the choice cards and the
   page header so the agency picker's own steps (ville → agence) replace step 1
   rather than stacking beneath it. */
.bred-gform_wrapper .bred-gf-step-hidden {
	display: none !important;
}
.bred-gform_wrapper .bred-gf-cards--contact .gfield_radio {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	max-width: 540px;
	margin-inline: auto;
}
@media (max-width: 575.98px) {
	.bred-gform_wrapper .bred-gf-cards--contact .gfield_radio {
		grid-template-columns: 1fr !important;
	}
}
/* Replace the audience icons with agency / call-back icons. */
.bred-gform_wrapper .bred-gf-cards--contact .gchoice:nth-child(1)::before {
	content: "\e102";
}
.bred-gform_wrapper .bred-gf-cards--contact .gchoice:nth-child(2)::before {
	content: "\e3ba";
}
/* Selected card gets a soft cyan fill (Figma). */
.bred-gform_wrapper .bred-gf-cards--contact .gchoice:has(input[type="radio"]:checked) {
	background-color: var(--bred-cyan-10);
}

/* Page 2 — topic checkboxes as full-width bordered rows. */
.bred-gform_wrapper .bred-gf-topics .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bred-gform_wrapper .bred-gf-topics .gchoice {
	display: flex !important;
	align-items: center;
	gap: 16px !important;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--bred-border);
	border-radius: 12px;
	background-color: #fff;
}
.bred-gform_wrapper .bred-gf-topics .gchoice:has(input[type="checkbox"]:checked) {
	border-color: var(--bred-navy);
	background-color: var(--bred-cyan-10);
}
.bred-gform_wrapper .bred-gf-topics input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0;
	width: 22px;
	height: 22px;
	accent-color: var(--bred-navy);
}
.bred-gform_wrapper .bred-gf-topics .gchoice label {
	margin: 0;
	font-size: var(--wp--preset--font-size--md, 16px);
	color: var(--bred-ink);
	cursor: pointer;
}

/* Page 1 — « Nous joindre directement » info panel. */
.bred-gform_wrapper .bred-gf-contact-info {
	margin-top: 16px;
	padding: 32px 24px;
	border-radius: 16px;
	background-color: var(--bred-cyan-10);
	text-align: center;
}
.bred-gf-contact-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-mg-30, #b2ecfb);
	color: var(--bred-navy);
}
.bred-gf-contact-info__title {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif);
	font-weight: 700;
	font-size: 20px;
	color: var(--bred-ink);
}
.bred-gf-contact-info__sub {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
}
.bred-gf-contact-info__phone {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg, 18px);
	color: var(--bred-ink);
}
.bred-gf-contact-info__hours {
	margin: 0;
	font-style: italic;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bred-muted);
}

/* ===================================================================
   « Candidature pour le poste de » — select with a Phosphor caret
   =================================================================== */
.bred-gform_wrapper .bred-gf-job-select .ginput_container_select {
	position: relative;
}
.bred-gform_wrapper .bred-gf-job-select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor: pointer;
}
.bred-gform_wrapper .bred-gf-job-select .ginput_container_select::after {
	font-family: "Phosphor";
	content: "\e136"; /* ph-caret-down */
	font-size: 20px;
	line-height: 1;
	color: var(--bred-navy);
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* ===================================================================
   FILE UPLOAD — dashed drop zone (Figma "FileUpload")
   Single-file fields flagged `.bred-gf-file`. The native <input type=file>
   is overlaid transparently so the whole zone is clickable; the icon,
   "Ajouter une pièce jointe" label and accepted-formats line are drawn in CSS.
   bred-forms.js adds `.is-filled` + a data-bred-filename attribute on select.
   =================================================================== */
.bred-gform_wrapper .bred-gf-file .ginput_container_fileupload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 32px 24px;
	border: 1px dashed var(--wp--preset--color--support-blue-30, #b2c3e3);
	border-radius: 8px;
	text-align: center;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.bred-gform_wrapper .bred-gf-file .ginput_container_fileupload:hover {
	border-color: var(--bred-navy);
	background-color: var(--bred-cyan-10);
}
/* File icon (top) */
.bred-gform_wrapper .bred-gf-file .ginput_container_fileupload::before {
	order: 0;
	font-family: "Phosphor";
	content: "\e23a"; /* ph-file-text */
	font-size: 40px;
	line-height: 1;
	color: var(--bred-navy);
}
/* "Ajouter une pièce jointe" (default label) */
.bred-gform_wrapper .bred-gf-file .ginput_container_fileupload::after {
	order: 1;
	content: "Ajouter une pièce jointe";
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #000f1d;
}
/* Native input = full-cover transparent click layer */
.bred-gform_wrapper .bred-gf-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
/* Accepted-formats / size line (GF auto rules) — bottom */
.bred-gform_wrapper .bred-gf-file .gform_fileupload_rules {
	order: 2;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--bred-muted);
}
/* Filled state (set by bred-forms.js): solid cyan zone, check icon, filename */
.bred-gform_wrapper .bred-gf-file .ginput_container_fileupload.is-filled {
	border-style: solid;
	border-color: var(--bred-blue);
	background-color: var(--bred-cyan-10);
}
.bred-gform_wrapper .bred-gf-file .ginput_container_fileupload.is-filled::before {
	content: "\e184"; /* ph-check-circle */
	color: var(--bred-blue);
}
.bred-gform_wrapper .bred-gf-file .ginput_container_fileupload.is-filled::after {
	content: attr(data-bred-filename);
	color: var(--bred-navy);
	word-break: break-word;
}

/* ===================================================================
   « Écrire à un conseiller » — message textarea, char counter, subtitle
   =================================================================== */
.bred-gform_wrapper .bred-gf-message textarea {
	min-height: 180px;
	resize: vertical;
}
/* Our "X/400 caractères" counter (added by bred-forms.js); hide GF's default. */
.bred-gform_wrapper .bred-gf-message .ginput_counter {
	display: none;
}
.bred-gform_wrapper .bred-gf-charcount {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--bred-muted);
}
/* Subtitle under the form's H2 heading (Figma "Indiquez simplement le motif…"). */
.bred-gform_wrapper .bred-gf-lead {
	margin: 8px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--bred-muted);
}

/* The consent checkbox's own text is the meaningful label; hide the redundant
   "Consentement" group label (the Figma consent block has only the legal note +
   the checkbox). Applies to every BRED consent field. */
.bred-gform_wrapper .bred-gf-consent .gfield_label {
	display: none;
}

/* ===================================================================
   Inline success confirmation (shown after submit, replaces the form)
   =================================================================== */
.bred-gf-success {
	max-width: 600px;
	margin-inline: auto;
	text-align: center;
	padding: 48px 24px;
}
.bred-gf-success__icon::before {
	font-family: "Phosphor";
	content: "\e184"; /* ph-check-circle */
	display: inline-block;
	font-size: 56px;
	line-height: 1;
	color: var(--wp--preset--color--primary, #0069a5);
}
.bred-gf-success .bred-gf-success__title {
	margin: 16px 0 8px;
	font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif) !important;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 28px);
	line-height: 1.1;
	color: var(--wp--preset--color--neutral-200, #141414);
}
.bred-gf-success__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--neutral-100, #636362);
}

/* Cloudflare Turnstile widget — centre it within the form. */
.cf-turnstile {
	text-align: center;
}