/**
 * Suggestions de la barre de recherche du header.
 *
 * Panneau noir qui s'ouvre sous le champ au fil de la frappe : un titre
 * « Produits », cinq propositions au plus — vignette carrée et titre — et
 * une dernière ligne qui mène à la page de résultats.
 *
 * Mesures relevées sur la référence à 1440px et 375px
 * (scripts/inspect-recherche-predictive-ref.mjs).
 */

/* Le panneau se cale sous le champ : il lui faut un parent positionné,
   que le formulaire du header n'avait pas besoin d'être jusqu'ici. */
.baba-search__form {
	position: relative;
}

/* Le panneau déborde du cadre d'un pixel de chaque côté et s'ouvre un
   pixel plus bas : il recouvre le trait du cadre au lieu de s'y coller. */
.baba-predictive {
	position: absolute;
	top: calc(100% + 1.05px);
	right: -1.05px;
	left: -1.05px;
	z-index: 20;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	background-color: var(--baba-color-text-solid);
	color: var(--baba-color-text-inverse);
}

/* ------------------------------------------------------------------ */
/* Titre de groupe                                                     */
/* ------------------------------------------------------------------ */

.baba-predictive__heading {
	margin: 0 21px;
	padding: 15.75px 0 7.875px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-normal);
	font-size: 10.5px;
	line-height: 12.5px;
	letter-spacing: 1.365px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------ */
/* Propositions                                                        */
/* ------------------------------------------------------------------ */

.baba-predictive__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.baba-predictive__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Grille de deux colonnes : la vignette, puis le titre. 71px de haut,
   soit 50px de vignette et 10,5px de marge de part et d'autre. */
.baba-predictive__link {
	display: grid;
	grid-template-columns: 50px 1fr;
	align-items: center;
	gap: 21px;
	padding: 10.5px 21px;
	color: var(--baba-color-text-inverse);
	text-decoration: none;
}

.baba-predictive__link:hover,
.baba-predictive__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--baba-color-text-inverse);
}

.baba-predictive__image {
	display: block;
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.baba-predictive__title {
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 13px;
	line-height: 16.9px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-inverse);
}

/* ------------------------------------------------------------------ */
/* Dernière ligne                                                      */
/* ------------------------------------------------------------------ */

.baba-predictive__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 21px;
	/* 41,3px de haut en tout : 29,6px de texte, 5,35px de part et d'autre
	   comme la ligne de la référence. */
	padding: 5.35px 21px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-base);
	line-height: 29.6px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.baba-predictive__all:hover,
.baba-predictive__all:focus-visible {
	color: var(--baba-color-text-inverse);
}

.baba-predictive__all svg {
	flex: none;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 749px) {
	/* Sur petit écran, la référence accroche le panneau à la barre entière
	   et non au champ : il descend du bas de la barre et va d'un bord à
	   l'autre de l'écran. Il suffit pour cela de rendre au formulaire sa
	   position statique — c'est alors la barre, elle positionnée, qui sert
	   de repère. */
	.baba-search__form {
		position: static;
	}

	.baba-predictive {
		top: 100%;
		right: 0;
		left: 0;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* 20px : c'est bien ce que la référence affiche sur petit écran, où
	   son titre de groupe change d'échelle au lieu de rétrécir. */
	.baba-predictive__heading {
		font-size: 20px;
		line-height: 23.81px;
	}

	.baba-predictive__title {
		font-size: 12px;
		line-height: 15.6px;
	}

	/* 47,58px de haut sur petit écran, contre 41,3 sur grand. */
	.baba-predictive__all {
		padding: 9.415px 21px;
		font-size: var(--baba-text-md);
		line-height: 27.75px;
	}
}