/* show a red asterisk for fields marked required (visual cue)
	   Note: input/select/textarea elements do not reliably support ::before/::after
	   pseudo-elements across browsers. We place the marker on the wrapper (.form-wrap)
	   so it appears next to the input. Specific controls (attachments, captcha)
	   keep their specialized ::after rules below and are excluded from the generic marker. */
.form-wrap.required {
	position: relative; /* ensure wrapper is positioned for absolute marker */
}

/* New wrapper for paired time inputs to keep them on same baseline */
.time-pair-inner {
	display: flex;
	gap: .5rem;
	align-items: center;
}
.time-pair-inner .form-wrap { flex: 1 1 50%; min-width: 0; }

/* Ensure labels and wrappers inside paired time inputs don't add extra top spacing
   which can desynchronize the two columns. Keep labels tight and wrappers aligned. */
.time-pair-inner .form-wrap {
	margin: 0; /* remove accidental outer margins */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.time-pair-inner .form-wrap .form-label {
	margin-top: 0 !important;
	margin-bottom: .25rem;
}

/* prevent top margin on the second row of labels/inputs */
.time-pair .form-wrap .form-label { margin-top: 0; }

@media (max-width: 575.98px) {
	.time-pair-inner { flex-direction: column; align-items: stretch; }
}


/* Textareas slightly larger but keep controlled */
.rd-form textarea.form-input.textarea-lg {
	padding: 0.55rem 0.65rem;
	min-height: 110px;
}

/* Input sizing defaults left to global styles (removed local height/padding overrides)
   to preserve native control sizing and avoid accessibility regressions. */


/* Ensure inline groups (phone prefix + number) align vertically centered */
.phone-prefix-wrap .form-input,
.phone_number_parent .form-input {
	display: block;
}
.phone-prefix-wrap .form-wrap, .phone_number_parent .form-wrap {
	margin-bottom: 0;
}

/* Tweak label spacing so reduced input height doesn't overlap */
.form-wrap .form-label {
	margin-bottom: .25rem;
	display: block;
}

/* Delivery days grid styling */
.delivery-days-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.delivery-day-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	flex-wrap: nowrap; /* keep everything on a single line per day */
	justify-content: space-between;
}
.delivery-day-row .form-check { flex: 0 0 140px; }
.delivery-times { display: flex; gap: .5rem; align-items: center; /* allow wrapping so time pairs flow to multiple lines on narrow widths */ flex-wrap: wrap; overflow: visible; }
.delivery-times .time-pair { display:flex; gap:.5rem; align-items:center; flex: 0 1 auto; }
.delivery-times .time-pair .form-wrap { flex: 1 1 120px; min-width: 90px; }
.time-input { width: 100%; max-width: 140px; }
.delivery-times .optional .form-label::after { content: ''; }

/* small "and" separator between primary and secondary time pairs */
.delivery-and {
	flex: 0 0 auto;
	margin: 0 .5rem;
	white-space: nowrap;
	color: #666;
	font-size: 0.95rem;
	align-self: center;
}

@media (max-width: 767.98px) {
	.delivery-and { display: none; }
}

@media (max-width: 767.98px) {
	.delivery-day-row { flex-direction: column; align-items: stretch; }
	.delivery-day-row .form-check { flex: none; }
	.delivery-times { flex-direction: column; }
}
.address-block {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-start;
}
.address-block .form-wrap { /* ensure each input wrapper stretches */
	width: 100%;
}
.address-block .fullwidth { flex-basis: 100%; }

/* Postal / City: postal fixed width, city flexible */
.billing_postal_parent, .delivery_postal_parent {
	flex: 0 0 140px; /* reserve fixed space for postal code */
	min-width: 120px;
	display: flex; /* keep inner .form-wrap from expanding the parent */
	align-items: center;
	margin-right: .5rem;
}
.billing_postal_parent .form-wrap, .delivery_postal_parent .form-wrap {
	width: 100%;
}
.billing_city_parent, .delivery_city_parent {
	flex: 1 1 auto; /* allow city to grow/shrink with available space */
	min-width: 0; /* allow shrinking so it stays on same line as postal code */
	display: flex;
	align-items: center;
}

/* Stronger rule to force postal + city to sit on the same line when they are
   direct children of .address-block (overrides other helpers like .fullwidth). */

.address-block > .billing_city_parent,
.address-block > .delivery_city_parent {
	flex: 1 1 auto !important;
}

/* More aggressive overrides to prevent city from wrapping to next line */
.address-block .billing_postal_parent,
.address-block .billing_city_parent,
.address-block .delivery_postal_parent,
.address-block .delivery_city_parent {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.address-block .billing_city_parent .form-wrap,
.address-block .delivery_city_parent .form-wrap {
	width: 100%;
	min-width: 0; /* allow proper shrinking inside flex */
}
/* If some markup adds .fullwidth accidentally, ensure city keeps inline behaviour */
.billing_city_parent.fullwidth, .delivery_city_parent.fullwidth {
	flex-basis: auto !important;
	flex: 1 1 auto !important;
}


/* Improve responsive stacking for billing/delivery groups and delivery-day rows */
@media (max-width: 991.98px) {
	/* ensure two-column groups collapse cleanly without horizontal overflow */
	.billing_details_group > div {
		flex-basis: 100% !important;
		min-width: 0 !important;
	}
	/* make standalone billing/delivery fields full width on smaller viewports */
	.billing_contact_parent, .billing_email_parent, .order_follow_email_parent,
	.billing_phone_fixed_parent, .billing_phone_mobile_parent, .swift_bic_parent, .iban_parent,
	.delivery_contact_parent, .delivery_email_parent, .delivery_phone_fixed_parent, .delivery_phone_mobile_parent {
		flex-basis: 100% !important;
		min-width: 0 !important;
	}
	/* postal / city parents should stack and not enforce fixed min widths */
	.billing_postal_parent, .delivery_postal_parent,
	.billing_city_parent, .delivery_city_parent {
		flex-basis: 100% !important;
		min-width: 0 !important;
		display: block !important;
	}
	/* Delivery days: allow wrapping and stack time inputs vertically on small screens */
	.delivery-day-row { flex-wrap: wrap; align-items: flex-start; }
	.delivery-day-row .form-check { flex: none; margin-bottom: .5rem; }
	.delivery-times { flex-direction: column; gap: .5rem; }
	.delivery-times .time-pair { width: 100%; display: flex; gap: .5rem; }
	.delivery-times .time-pair .form-wrap { flex: 1 1 auto; min-width: 0; }
	.delivery-and { display: none; }
	.time-input { max-width: none; width: 100%; }
}

@media (max-width: 575.98px) {
	/* extra small screens: tighten spacing and ensure full width inputs */
	.delivery-day-row { gap: .5rem; }
	.delivery-day-row .form-check label { font-size: 0.95rem; }
	.delivery-times .time-pair { flex-direction: column; }
	.delivery-times .time-pair .form-wrap { width: 100%; }
}

/* Ensure .address-block defaults to row on larger viewports in case other styles force column */
@media (min-width: 992px) {
	.address-block { flex-direction: row !important; }
}



/* Billing details: two-column layout with percentage widths and minimums */
.billing_details_group {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.billing_details_group > div {
	flex: 0 0 48%; /* approximately 2 columns */
	min-width: 220px; /* avoid too narrow fields */
}

/* Delivery fields inside delivery block: two-column percentages + mins */
.address-block.delivery-block .delivery_contact_parent,
.address-block.delivery-block .delivery_email_parent,
.address-block.delivery-block .delivery_phone_fixed_parent,
.address-block.delivery-block .delivery_phone_mobile_parent {
	flex: 0 0 48%;
	min-width: 220px;
}
	/* delivery days/hours should span full width to host the 7 rows */
	.address-block.delivery-block .delivery_days_hours_parent {
		flex: 0 0 100%;
		min-width: 0;
	}
@media (max-width: 991.98px) {
	.address-block.delivery-block .delivery_contact_parent,
	.address-block.delivery-block .delivery_email_parent,
	.address-block.delivery-block .delivery_phone_fixed_parent,
	.address-block.delivery-block .delivery_phone_mobile_parent,
	.address-block.delivery-block .delivery_days_hours_parent { flex-basis: 100%; min-width: 0; }
}

/* Make standalone billing/delivery single fields also respect percentage and min when outside groups */
.billing_contact_parent, .billing_email_parent, .order_follow_email_parent,
.billing_phone_fixed_parent, .billing_phone_mobile_parent, .swift_bic_parent, .iban_parent,
.delivery_contact_parent, .delivery_email_parent, .delivery_phone_fixed_parent, .delivery_phone_mobile_parent {
	flex: 0 0 48%;
	min-width: 220px;
}
@media (max-width: 991.98px) {
	.billing_contact_parent, .billing_email_parent, .order_follow_email_parent,
	.billing_phone_fixed_parent, .billing_phone_mobile_parent, .swift_bic_parent, .iban_parent,
	.delivery_contact_parent, .delivery_email_parent, .delivery_phone_fixed_parent, .delivery_phone_mobile_parent {
		flex-basis: 100%; min-width: 0;
	}
}

/* Force the billing contact field to occupy a single full-width line
   to ensure it does not wrap into multiple visual rows on larger viewports. */
.billing_contact_parent {
	flex: 0 0 100% !important;
	min-width: 0 !important;
}
.billing_contact_parent .form-wrap {
	width: 100%;
}



/* Hide the required asterisk for hidden fields (display: none) */
.form-wrap.required[style*='display: none']::before {
	display: none !important;
}

/* Validation visuals: make error messages and invalid fields clearly visible */
span.text-danger,
.text-danger {
	color: #d00 !important; /* red for error text */
}

/* Inputs marked invalid by JS (class .is-invalid or aria-invalid) show a red border + subtle shadow */
.form-input.is-invalid,
.form-input[aria-invalid="true"],
input.is-invalid, textarea.is-invalid, select.is-invalid,
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
	border-color: #d00 !important;
	box-shadow: 0 0 0 .12rem rgba(220,53,69,0.12) !important;
	outline: none !important;
	transition: border-color .12s ease, box-shadow .12s ease;
}

/* When focusing an invalid field, emphasize the red ring */
.form-input.is-invalid:focus,
.form-input[aria-invalid="true"]:focus,
input.is-invalid:focus, textarea.is-invalid:focus, select.is-invalid:focus {
	box-shadow: 0 0 0 .18rem rgba(220,53,69,0.18) !important;
}

/* ensure validation spans inside form-wrap are visible and spaced */
.form-wrap > span.text-danger, .form-wrap .text-danger {
	display: block;
	margin-top: .35rem;
	font-size: .95rem;
}


	.form-wrap.required::before {
      content: " *";
		color: #d00; /* red */
		font-weight: 600;
		position: absolute;
		right: .75rem; /* align near the input's right edge */
		top: .25rem; /* place at top-right of the wrapper */
		transform: none;
		pointer-events: none;
		display: inline-block;
		z-index: 5;
	}
	/* Do not show the generic marker for attachments or captcha wrappers because
		 they have their own ::after placement and structure. */
	.attachments-wrap.required::before,
	#dntCaptcha.required::before {
		display: none !important;
	}

	/* Provide a dedicated visual required marker for the attachments control.
	   The generic `.form-wrap.required::before` is hidden for `.attachments-wrap`
	   so add a specific `::after` marker positioned near the file input. */
	.attachments-wrap.required {
		position: relative;
	}
	.attachments-wrap.required::after {
		content: " *";

		font-weight: 600;
		position: absolute;
		right: .5rem;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
		display: inline-block !important;
		z-index: 5;
	}

	/* Ensure the attachments wrapper does not clip the marker */
	.attachments-wrap, .attachments_parent, #attachments-parent {
		overflow: visible !important;
	}

	/* message area strong text */
	#msg{
		font-weight: bold;
	}

	/* Ensure messages injected from option data-msg appear in black for readability */
	#msg, #msg p, #msg div {
		color: #000 !important;
	}

	/* Make the required fields note (small paragraph under the title) black */
	#required-fields-note {
		color: #000 !important;
	}

	/* Ensure the title subtitle text is black */
	.title-classic .title-classic-subtitle {
		color: #000 !important;
	}

	/* Label centré dans le champ quand vide, sous l'input quand rempli */
	.form-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.form-message {
		max-width: 40rem; /* constrain message width for readability */
		margin: 0 auto;
		padding: 1.5rem;
		background: #f9f9f9;
		border: 1px solid #ddd;
		border-radius: 0.5rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	/* Make the reseller link in the contact message area much larger and inviting */
	#msg a {
	  display: inline-block;
	  font-size: 1.05rem;
	  font-weight: 400;
	  color: #1a237e;
	  text-decoration: underline;
	  margin: 0.25em 0;
	  padding: 0.05em 0.2em;
	  transition: color 0.15s;
	}
	#msg a:hover, #msg a:focus {
	  color: #d00;
	  background: #f5f5f5;
	  text-decoration: underline;
	}
	.small-link {
		font-size: 0.92rem;
		color: #1a237e;
		text-decoration: underline;
		transition: color 0.15s;
	}
	.small-link:hover, .small-link:focus {
		color: #d00;
		text-decoration: underline;
	}



	/* Place labels above inputs: keep labels as normal block elements
		   to avoid floating/overlapping behavior. This preserves accessibility
		   and prevents the previous floating-label logic from breaking labels. */
    .form-wrap .form-label {
		position: static !important;
		left: auto;
		top: auto;
		transform: none;
		display: block;
		margin-bottom: .5rem; /* space between label and input */
		font-size: 0.95em;
		color: #444; /* slightly darker for better contrast */
		pointer-events: auto;
		transition: none;
		background: transparent;
		width: 100%;
		order: -1 !important; /* ensure label appears above the input even if DOM places it after */
	}

	/* Stronger specificity to force label above input in case other styles interfere */
    .form-wrap > .form-label {
		order: -1 !important;
		position: static !important;
	}

	.form-wrap > .form-input,
	.form-wrap > textarea.form-input,
	.form-wrap > select.form-input {
		order: 0 !important;
		position: relative !important;
	}

	/* Ensure the "is-filled" state does not re-position labels back into inputs */
    .form-wrap.is-filled .form-label {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		display: block;
		margin-bottom: .5rem;
		font-size: 0.95em;
		color: #444;
		pointer-events: auto;
		transition: none;
		width: 100%;
		order: -1; /* keep label above when field is filled */
		opacity: 1 !important;
	}

/* Override any floating-label rules from other stylesheets: keep labels visible
   when the input is focused or when scripts add helper classes like .label-after. */
.form-wrap .form-input:focus + .form-label,
.form-wrap .form-input:focus ~ .form-label,
.form-wrap textarea.form-input:focus + .form-label,
.form-wrap textarea.form-input:focus ~ .form-label,
.form-wrap select.form-input:focus + .form-label,
.form-wrap select.form-input:focus ~ .form-label,
.form-wrap.label-after .form-label,
.form-wrap .form-label {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	transform: none !important;
	pointer-events: auto !important;
	z-index: 2; /* ensure label sits above inputs if other rules use stacking */
}



	/* wrapper must be positioned to host the pseudo-element */
	.form-wrap.select-with-chevron {
		position: relative;
	}

		/* remove native arrow on the select and add spacing for the chevron*/
		.form-wrap.select-with-chevron select.form-input {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding-right: clamp(0.6rem, 2vw, 2.25rem); /* responsive room for chevron */
		}

			/* hide default IE/Edge dropdown arrow for these selects */
			.form-wrap.select-with-chevron select.form-input::-ms-expand {
				display: none;
			}

		/* draw a chevron using an inline SVG as background on the wrapper ::after */
		.form-wrap.select-with-chevron::after {
			content: "";
			position: absolute;
			right: .7rem; /* slightly more space from edge */
			top: 50%;
			transform: translateY(-50%);
			/* size the chevron relative to the wrapper so it shrinks when the input is narrow */
			width: min(1.4em, 18%);
			height: min(1.4em, 18%);
			pointer-events: none;
			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
			background-repeat: no-repeat;
			/* make the pseudo-element background transparent except the SVG chevron */
			background-color: transparent;
			background-size: contain;
			background-position: center;
			opacity: 1;
		}
	/* show a small plus sign before phone prefix input using wrapper.has-plus */
	/* phone-prefix wrapper keeps normal flow; plus is shown via the label element only */
.phone-prefix-wrap {
	position: relative;
}

/* Force LTR inside the prefix wrapper to avoid RTL/layout flips that can
   move the chevron/asterisk to the left in some environments. */
.phone-prefix-wrap {
	direction: ltr;
}

.phone-prefix-wrap.has-plus .form-input {
	padding-left: 1.6rem; /* room for plus */
}

	.phone-prefix-wrap.has-plus .form-input::placeholder {
		color: #999;
	}

	.phone-prefix-wrap.has-plus::before {
		content: "+";
	}

/* For the phone-prefix control we avoid colliding with the chevron pseudo-element
   (the chevron is drawn with .form-wrap.select-with-chevron::after). To prevent
   overriding the chevron we render the required marker using the ::before pseudo
   on the wrapper when required. This keeps the chevron in place and positions
   the asterisk to the left of it. If a leading '+' is rendered via
   .phone-prefix-wrap.has-plus::before that will be hidden when the wrapper is
   also marked required (required asterisk takes precedence). */
.form-wrap.select-with-chevron.phone-prefix-wrap::after {
	/* ensure chevron stays at the right edge of the phone-prefix wrapper */
	right: .7rem !important;
	left: auto !important;
	z-index: 1 !important;
}

/* hide the leading '+' when the wrapper is required so the required marker
   can be shown cleanly */
.phone-prefix-wrap.has-plus.required::before {
	display: none !important;
}

.form-wrap.phone-prefix-wrap.required::before {
	content: " *" !important;
	color: #d00 !important;
	font-weight: 600 !important;
	position: absolute !important;
	/* place the asterisk left of the chevron */
	right: 1.9rem !important; /* tuned to sit before the chevron */
	left: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	display: inline-block !important;
	z-index: 2 !important;
}

/* attachments: show a required asterisk at the side of the file input when attachments are required */
.attachments-wrap.required::after {
	/* place the asterisk to the right like other inputs (avoid left placement)
		   keep it visually consistent with standard .form-wrap.required marker */
	content: " *";
	color: #d00;
	font-weight: 600;
	position: absolute;
	right: .75rem; /* place near the input's right edge */
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* captcha wrapper: show a required asterisk to the right when required */
#dntCaptcha.required::after {
	content: " *";
	color: #d00;
	font-weight: 600;
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* avoid overlapping the select chevron and the required asterisk: move the
		   generic asterisk slightly left for selects so it sits before the chevron */
.form-wrap.select-with-chevron.required::before {
	right: 2.25rem; /* leave room for the chevron placed at ~0.7rem */
}

/* Global wrapper-level invalid state: show red border and halo similar to invalid inputs */
.form-wrap.is-invalid, .form-wrap[aria-invalid="true"] {
	border: 1px solid #d00 !important;
	box-shadow: 0 0 0 .12rem rgba(220,53,69,0.12) !important;
	border-radius: .25rem;
	padding: .45rem; /* small padding so content doesn't touch the border */
	box-sizing: border-box;
}

/* When wrapper contains a label placed above, avoid label being pushed by padding */
.form-wrap.is-invalid > .form-label {
	margin-top: 0 !important;
}


/* visually gray out the submit button when disabled or aria-disabled is true */
.submit-button[disabled],
.submit-button[aria-disabled="true"] {
	opacity: 0.5;
	filter: grayscale(100%);
	cursor: not-allowed;
	pointer-events: none;
}



@media (max-width: 991.98px) {
	/* Tablets and below: reduce prefix width so it doesn't take too much space */
	.phone-prefix-row {
		display: flex;
		gap: .25rem; /* smaller gap */
		align-items: center;
		flex-wrap: nowrap; /* keep on same line when possible */
	}

		.phone-prefix-row .col-4 {
			flex: 0 0 4.5rem; /* narrower prefix column on tablets */
			max-width: 4.5rem;
		}

		.phone-prefix-row .col-8 {
			flex: 1 1 auto; /* phone field takes the remaining space */
		}
	/* allow the select to be a bit smaller on tablets */
	.phone-prefix-wrap .form-input {
		min-width: 3rem;
		max-width: 100%;
	}
}


#dntCaptcha input#captcha.form-input {
	/* small horizontal nudge to match other form inputs */
	margin-left: 0;
	padding-left: 0.35rem; /* ensure caret/text not clipped */
	box-sizing: border-box;
}

/* If an input-group addon/icon exists, keep it inline without shifting layout */
#dntCaptcha .input-group-addon,
#dntCaptcha .input-group-text,
#dntCaptcha .glyphicon,
#dntCaptcha .bi-lock {
	vertical-align: middle;
}

/* Protect captcha markup from the floating-label layout changes applied to .form-wrap
		   The DNTCaptcha control renders its own structure (image, input, refresh button).
		   Ensure our .is-filled / .label-after rules do not change its display or label positioning.
		*/
#dntCaptcha .form-wrap,
dnt-captcha .form-wrap,
#dntCaptcha .form-wrap.is-filled.label-after,
dnt-captcha .form-wrap.is-filled.label-after,
#dntCaptcha .form-wrap.is-filled,
dnt-captcha .form-wrap.is-filled {
	display: block !important;
	flex-direction: initial !important;
	margin-bottom: 0 !important;
}



/* Keep the captcha input label in normal flow (not over the image) */
#dntCaptcha > label.form-label,
dnt-captcha > label.form-label,
#dntCaptcha label[for="captcha"],
dnt-captcha label[for="captcha"] {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	display: block !important;
	margin: 0 0 .5rem 0 !important;
	order: 0 !important;
	z-index: auto !important;
}

/* Ensure captcha image and refresh button are inline and not pushed below by our
		   floating-label rules. Target the typical structure rendered by DNTCaptcha. */
#dntCaptcha img#dntCaptchaImg,
dnt-captcha img#dntCaptchaImg {
	display: inline-block;
	vertical-align: middle;
	margin-right: .5rem;
	margin-bottom: 0 !important;
}

#dntCaptcha a.dnt-refresh-btn,
dnt-captcha a.dnt-refresh-btn {
	display: inline-block;
	vertical-align: middle;
	margin-left: .25rem;
}

#dntCaptcha > .form-wrap,
#dntCaptcha .form-wrap > .input-group,
dnt-captcha > .form-wrap,
dnt-captcha .form-wrap > .input-group {
	/* ensure captcha controls take full available width in our layout */
	display: block !important;
	width: 100% !important;
	vertical-align: initial !important;
}

/* make the captcha text input expand to the wrapper width */
#dntCaptcha input.form-input,
dnt-captcha input.form-input {
	width: 100% !important;
	box-sizing: border-box !important;
}
/* Ensure social svg icons appear solid black on this page */
.social-local-contact img {
	width: 36px; /* larger for sidebar/aside */
	height: auto;
	display: inline-block;
	vertical-align: middle;
	/* convert any colored SVG to solid black */
	filter: grayscale(1) brightness(0) contrast(1);
	transition: filter .12s ease, opacity .12s ease; /* smooth hover */
}
/* prevent other rules from changing icon color on hover: keep them black */
.social-local-contact a img,
.social-local-contact a:link img,
.social-local-contact a:visited img,
.social-local-contact a:focus img,
.social-local-contact a:hover img {
	filter: grayscale(1) brightness(0) contrast(1);
	opacity: 1;
}


 /* Strong override: ensure labels remain visible above inputs even if other
   global styles try to implement floating-label behavior. This uses very
   high specificity and !important flags to neutralize legacy rules from
   other stylesheets during testing. If this fixes the issue, consider
   refining selectors to avoid using !important in production. */
html body .form-wrap .form-label {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	transform: none !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	pointer-events: auto !important;
	z-index: 2 !important;
}

.social-local-contact a:hover img {
	/* optionally slightly reduce opacity on hover for subtle feedback */
	opacity: 0.92;
}

.social-local-contact ul.list-social {
	gap: 6px;
}

/* remove any left margin/padding coming from utility classes so icons align flush */
.social-local-contact,
.social-local-contact ul,
.social-local-contact ul.list-social {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.social-local-contact ul li {
  /* No-op to satisfy patch format */
	margin-left: 0 !important;
}

.social-local-contact a {
	margin-left: 0 !important;
}

/* Forcer la bordure rouge sur le champ captcha en erreur, même si d'autres styles s'appliquent */
#dntCaptcha input#captcha.form-input.is-invalid,
dnt-captcha input#captcha.form-input.is-invalid,
#dntCaptcha input.form-input.is-invalid,
#dntCaptcha input.form-input[aria-invalid="true"],
dnt-captcha input.form-input.is-invalid,
dnt-captcha input.form-input[aria-invalid="true"],
#dntCaptcha input[aria-invalid="true"],
dnt-captcha input[aria-invalid="true"],
input#captcha.is-invalid,
input#captcha[aria-invalid="true"],
input[name="captcha"].is-invalid,
input[name="captcha"][aria-invalid="true"],
div[id^="dntCaptcha"] input.form-input.is-invalid,
div[id^="dntCaptcha"] input.form-input[aria-invalid="true"],
.input-group input#captcha.is-invalid,
.input-group input#captcha[aria-invalid="true"] {
	border-color: #d00 !important;
	outline: none !important;
}

/* === Delivery days: required marker and error visuals === */
/* Show the required asterisk for individual time input wrappers and place
   it in the top-right of the small time control so it does not sit inside
   the clock UI. Keep attachments/captcha exclusions elsewhere. */
.delivery-times .form-wrap.required::before,
.delivery-day-row .form-wrap.required::before,
.delivery-days-list .form-wrap.required::before {
	content: " *" !important;
	display: inline-block !important;
	color: #d00 !important;
	font-weight: 600 !important;
	position: absolute !important;
	right: .25rem !important; /* tuck to top-right of the small wrapper */
	top: .25rem !important;
	transform: none !important;
	font-size: 0.85rem !important; /* slightly smaller for compact controls */
	pointer-events: none !important;
	z-index: 5 !important;
}

/* Ensure each small time wrapper is positioned so the absolute ::before
   asterisk is placed relative to it. Also raise z-index so the marker sits
   above native time-picker UI elements when the input is filled. */
.time-pair-inner .form-wrap {
	position: relative !important;
	z-index: 1 !important; /* ensure wrapper creates a stacking context */
}
.time-pair-inner .form-wrap .form-input {
	position: relative !important;
	z-index: 0 !important; /* keep native input below the marker */
}
.time-pair-inner .form-wrap.required::before {
	z-index: 5 !important; /* reduced so markers don't overlay fixed header */
}

/* Ensure marker remains visible when scripts add .is-filled or other states */
.time-pair-inner .form-wrap.required::before,
.time-pair-inner .form-wrap.is-filled.required::before,
.time-pair-inner .form-wrap[aria-invalid="true"].required::before {
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Position the delivery-days block asterisk at the top-right of the block
   (instead of near individual time inputs). */
.delivery_days_hours_parent .form-wrap.required::before {
	right: .75rem; /* similar to inputs but placed near top */
	top: .25rem;   /* move to top of block */
	transform: none;
}

/* When the delivery-days block has a validation error, show a red border
   and subtle halo like other invalid inputs. Use :has() to detect the
   validation span sibling when supported; fallback JS will add .is-invalid
   to the wrapper for older browsers. */
.delivery_days_hours_parent .form-wrap:has(+ span.text-danger:not(:empty)),
.delivery_days_hours_parent .form-wrap.is-invalid,
.delivery_days_hours_parent .form-wrap[aria-invalid="true"] {
	border: 1px solid #d00 !important;
	box-shadow: 0 0 0 .12rem rgba(220,53,69,0.12) !important;
	border-radius: .25rem;
	padding: .6rem; /* add a little padding so inner controls don't touch the border */
	box-sizing: border-box;
}

/* Ensure the label does not overlap the new border visually */
.delivery_days_hours_parent .form-wrap .form-label {
	background: transparent;
	padding-right: .5rem;
}

/* Keep captcha block order stable: image -> label -> input -> validation */
#dntCaptcha {
	display: flex !important;
	flex-direction: column !important;
}

#dntCaptcha > .captcha-image-wrap {
	order: 1 !important;
}

#dntCaptcha > label[for="captcha"],
dnt-captcha > label[for="captcha"] {
	order: 2 !important;
}

#dntCaptcha > input#captcha,
dnt-captcha > input#captcha {
	order: 3 !important;
}

#dntCaptcha > span.text-danger,
dnt-captcha > span.text-danger {
	order: 4 !important;
}

/* hidden key stays out of layout flow */
#dntCaptcha > input[type="hidden"] {
	order: 0 !important;
}