/* Champ de recherche — styles front */

.hsas {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.hsas-form {
	--hsas-width: 260px;
	--hsas-icon: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
}

.hsas-form--icon-before {
	flex-direction: row-reverse;
}

/* Champ dépouillé : seul le filet du bas subsiste. */
.hsas-form__field {
	width: var(--hsas-width);
	max-width: 100%;
	padding: 6px 0 8px;
	border: 0;
	border-bottom: 1px solid #111;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #111;
	font-size: 16px;
	font-style: italic;
	line-height: 1.3;
	outline-offset: 2px;
}

.hsas-form__field:focus {
	outline: none;
	border-bottom-color: currentColor;
}

/* La croix native de Safari et Chrome déséquilibre le filet. */
.hsas-form__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.hsas-form__submit,
.hsas-form__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hsas-icon, 24px);
	height: var(--hsas-icon, 24px);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
}

.hsas-form__submit svg,
.hsas-form__toggle svg {
	width: 100%;
	height: 100%;
	fill: #111;
	transition: fill 180ms ease;
}

.hsas-form__submit:focus-visible,
.hsas-form__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Loupe seule, champ déplié au clic ---------------------------------- */

.hsas--toggle .hsas-form {
	position: absolute;
	top: 50%;
	inset-inline-end: 0;
	z-index: 20;
	display: none;
	padding: 10px 14px;
	transform: translateY(-50%);
	background-color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hsas--toggle.is-open .hsas-form {
	display: flex;
}

.hsas--toggle.is-open .hsas-form__toggle {
	visibility: hidden;
}

@media (max-width: 767px) {
	.hsas-form {
		--hsas-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hsas-form__submit svg,
	.hsas-form__toggle svg {
		transition: none;
	}
}

.hsas .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}