/* Recherche de bougies (inc/recherche.php) : loupe du header et panneau sous le header. Jetons de main.css uniquement. */

.no-js .site-header__search {
	display: none;
}

.site-header__search[aria-expanded="true"] {
	background: var(--cmb-color-linen);
	color: var(--cmb-color-accent-strong);
}

.site-header__action:focus-visible {
	outline: 2px solid var(--cmb-color-focus);
	outline-offset: 2px;
}

/* --- Panneau --- */

.cmb-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--cmb-color-surface);
	border-top: 1px solid var(--cmb-color-border);
	border-bottom: 1px solid var(--cmb-color-border);
	box-shadow: var(--cmb-shadow-m);
	animation: cmb-fade-in var(--cmb-duration-base) var(--cmb-ease);
}

.cmb-search[hidden] {
	display: none;
}

.cmb-search__inner {
	max-width: 42rem;
	padding-block: var(--cmb-space-s) var(--cmb-space-m);
}

.cmb-search__form {
	position: relative;
	display: flex;
	align-items: center;
}

.cmb-search__icon {
	position: absolute;
	left: var(--cmb-space-s);
	color: var(--cmb-color-text-muted);
	pointer-events: none;
}

.cmb-search__input {
	width: 100%;
	min-height: 3rem;
	padding: 0 calc(var(--cmb-tap-target) + var(--cmb-space-2xs)) 0 calc(var(--cmb-space-s) + 1.75rem);
	font: inherit;
	font-size: 1rem; /* 16 px : pas de zoom automatique sur iPhone */
	color: var(--cmb-color-text);
	background: var(--cmb-color-background);
	border: 1px solid var(--cmb-color-border-strong);
	border-radius: var(--cmb-radius-pill);
	appearance: none;
}

.cmb-search__input::placeholder {
	color: var(--cmb-color-text-muted);
}

.cmb-search__input::-webkit-search-cancel-button {
	display: none;
}

.cmb-search__input:focus {
	outline: none;
	border-color: var(--cmb-color-accent);
	box-shadow: 0 0 0 3px rgb(182 106 60 / 0.2); /* halo cuivre, visible sans double trait */
}

.cmb-search__close {
	position: absolute;
	right: 0.125rem;
	display: inline-grid;
	place-items: center;
	width: var(--cmb-tap-target);
	height: var(--cmb-tap-target);
	padding: 0;
	color: var(--cmb-color-text-muted);
	background: transparent;
	border: 0;
	border-radius: var(--cmb-radius-pill);
	cursor: pointer;
}

.cmb-search__close:hover {
	color: var(--cmb-color-text);
	background: var(--cmb-color-linen);
}

.cmb-search__close:focus-visible {
	outline: 2px solid var(--cmb-color-focus);
	outline-offset: 1px;
}

.cmb-search__status {
	margin: var(--cmb-space-xs) var(--cmb-space-2xs) 0;
	color: var(--cmb-color-text-muted);
	font-size: var(--cmb-text-sm);
}

/* --- Résultats --- */

.cmb-search__results {
	max-height: min(26rem, calc(100dvh - var(--cmb-header-height) - 11rem));
	margin: var(--cmb-space-2xs) 0 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.cmb-search__results:empty {
	display: none;
}

.cmb-search__link {
	display: flex;
	align-items: center;
	gap: var(--cmb-space-s);
	padding: var(--cmb-space-2xs);
	color: inherit;
	text-decoration: none;
	border-radius: var(--cmb-radius-m);
}

.cmb-search__link:hover,
.cmb-search__option[aria-selected="true"] .cmb-search__link {
	background: var(--cmb-color-linen);
}

.cmb-search__option[aria-selected="true"] .cmb-search__link {
	box-shadow: inset 2px 0 0 var(--cmb-color-accent);
}

.cmb-search__img {
	flex: none;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	background: var(--cmb-color-surface-alt);
	border-radius: var(--cmb-radius-s);
}

.cmb-search__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.cmb-search__name {
	font-family: var(--cmb-font-heading);
	font-size: var(--cmb-text-lg);
	line-height: 1.25;
}

.cmb-search__meta {
	color: var(--cmb-color-text-muted);
	font-size: var(--cmb-text-sm);
}

.cmb-search__all {
	display: inline-block;
	margin: var(--cmb-space-xs) var(--cmb-space-2xs) 0;
	color: var(--cmb-color-accent-strong);
	font-size: var(--cmb-text-sm);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.cmb-search__all[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.cmb-search {
		animation: none;
	}
}

/* --- Header étroit : quatre boutons de 44 px (loupe, compte, panier, menu) ; le logo cède un peu de largeur sous
   ~26em au lieu de pousser les boutons hors de l'écran. Rien ne change au-dessus. --- */

@media (max-width: 71.999em) {
	.site-header__brand {
		flex-shrink: 1;
		min-width: 5.5rem;
	}

	.site-header__brand img,
	.site-header__brand svg {
		max-width: 100%;
		height: auto;
	}

	.site-header__actions {
		flex-shrink: 0;
	}
}

@media (max-width: 25.999em) {
	.site-header__inner {
		gap: var(--cmb-space-2xs);
	}

	.site-header__actions {
		gap: 0;
	}
}