/*
 * Recherche (MillV2\Search\Search) : bouton et fenêtre. Structure hors couche ; apparence dans @layer millv2-blocks (le CSS du thème l'emporte).
 *
 * Variables : --millv2-search-width (largeur de la fenêtre, 42rem), --millv2-search-top (distance du haut, 5rem), --millv2-search-bg, --millv2-search-color,
 * --millv2-search-accent (titres de section, liens au survol), --millv2-search-radius, --millv2-search-backdrop (voile, rgb(0 0 0 / 55%)),
 * --millv2-search-blur (flou du voile, 6px).
 */
html.millv2-search-open {
	overflow: hidden;
}

.millv2-search__open {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

/* Loupe dessinée en CSS (repli quand le thème n'a pas d'icône « search ») */
.millv2-search__glass {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid currentcolor;
	border-radius: 50%;
	box-sizing: border-box;
}

.millv2-search__glass::after {
	content: '';
	position: absolute;
	right: -0.35rem;
	bottom: -0.3rem;
	width: 0.45rem;
	height: 2px;
	background: currentcolor;
	transform: rotate(45deg);
}

dialog.millv2-search {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--millv2-search-top, 5rem) 1rem 1rem;
	border: 0;
	background: transparent;
	overflow: auto;
	overscroll-behavior: contain;
}

dialog.millv2-search:not([open]) {
	display: none;
}

.millv2-search__panel {
	width: min(var(--millv2-search-width, 42rem), 100%);
	margin-inline: auto;
}

.millv2-search__form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
}

.millv2-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
}

.millv2-search__input:focus {
	outline: none;
}

.millv2-search__submit {
	flex: 0 0 auto;
	padding: 0.55rem 1rem;
	border: 0;
	cursor: pointer;
	font: inherit;
}

.millv2-search__close {
	position: relative;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.millv2-search__close-icon::before,
.millv2-search__close-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.25rem;
	height: 2px;
	background: currentcolor;
}

.millv2-search__close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.millv2-search__close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.millv2-search__list,
.millv2-search__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.millv2-search__results[hidden],
.millv2-search__suggestions[hidden] {
	display: none;
}

.millv2-search__suggestions,
.millv2-search__results {
	padding: 0.5rem 1.25rem 1.25rem;
}

.millv2-search__link {
	display: grid;
	gap: 0.15rem;
	padding: 0.85rem 0;
	color: inherit;
	text-decoration: none;
}

.millv2-search__title {
	font-weight: 700;
}

/* Typographie du titre « Suggestions » hors couche : les titres du thème (h3) ne la changent pas */
.millv2-search__heading {
	margin: 1rem 0 0.25rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

@layer millv2-blocks {
	dialog.millv2-search::backdrop {
		background: var(--millv2-search-backdrop, rgb(0 0 0 / 55%));
		backdrop-filter: blur(var(--millv2-search-blur, 6px));
	}

	.millv2-search__panel {
		overflow: hidden;
		border-radius: var(--millv2-search-radius, 0.5rem);
		background: var(--millv2-search-bg, #fff);
		color: var(--millv2-search-color, #1d1d1b);
		box-shadow: 0 12px 40px rgb(0 0 0 / 25%);
	}

	.millv2-search__form {
		border-bottom: 1px solid rgb(0 0 0 / 10%);
	}

	.millv2-search__submit {
		background: var(--millv2-search-accent, #1d1d1b);
		color: #fff;
	}

	.millv2-search__heading {
		color: var(--millv2-search-accent, #6b5300);
	}

	.millv2-search__subtitle {
		font-size: 0.875rem;
		opacity: 0.85;
	}

	.millv2-search__link:hover .millv2-search__title {
		text-decoration: underline;
	}

	.millv2-search__open:focus-visible,
	.millv2-search__submit:focus-visible,
	.millv2-search__close:focus-visible,
	.millv2-search__link:focus-visible {
		outline: 3px solid currentcolor;
		outline-offset: 2px;
	}

	.millv2-search__form:focus-within {
		box-shadow: inset 0 0 0 2px var(--millv2-search-accent, #1d1d1b);
	}
}