/**
 * 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;
}
/* 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;
	min-height: 54px;
	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 {
	background-color: var(--bred-cyan-10);
	border: 0;
	border-radius: 16px;
	padding: 24px;
}
.bred-gform_wrapper .bred-gf-availability .gfield_label {
	margin: 0 0 16px;
}
.bred-gform_wrapper .bred-gf-availability .gfield_radio {
	display: flex !important;
	flex-direction: column;
	gap: 16px !important;
	padding: 0;
	background: transparent;
}
.bred-gform_wrapper .bred-gf-availability .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 .bred-gf-availability input[type="radio"] {
	flex-shrink: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	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--lg, 18px);
	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);
}

/* ===================================================================
   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;
}
.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;
}