/*
 * Recherche de l'en-tête — panneau de suggestions.
 * Maquettes : chrome/header.html (ordinateur) et écran M7 de Mobile.dc.html (390 px).
 * Le champ (fond gris, contour orange au focus, bouton) appartient à l'en-tête (base.css) ; ici : le
 * contenu du panneau, sa mise au premier plan, et l'affichage plein écran sur mobile.
 *
 * États posés par assets/js/recherche.js :
 *   .lbdp-recherche--ouverte        panneau affiché
 *   .lbdp-recherche--plein-ecran    mobile (≤ 768 px) : champ en haut de l'écran, panneau plein écran
 *   html.lbdp-recherche-plein-ecran la page derrière ne défile plus
 */

/* Le champ (fond gris, contour orange au focus, bouton) est stylé par base.css (en-tête).
   Seule correction : pas de halo des champs de formulaire À L'INTÉRIEUR du contour orange du formulaire. */
.lbdp-recherche__champ:focus {
	box-shadow: none;
}

/* Panneau ouvert : l'en-tête passe au premier plan (au-dessus du panier latéral fermé, du bouton
   « remonter », des badges flottants). */
.lbdp-entete:has(.lbdp-recherche--ouverte) {
	z-index: 2147483000;
}

.lbdp-recherche--ouverte {
	z-index: 2147483000;
}

/* -------------------------------------------------------------------------
 * Panneau (ordinateur)
 * ---------------------------------------------------------------------- */

.lbdp-recherche__panneau {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 10;
	max-height: min(calc(100dvh - 8.5rem), 40rem);
	padding: 1.125rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--lbdp-texte);
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: left;
	background: #fff;
	border: 1px solid var(--lbdp-bord);
	border-radius: var(--lbdp-r-carte);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

/* Réponse en attente : on garde l'affichage précédent, légèrement estompé (après 150 ms seulement). */
.lbdp-recherche__panneau[aria-busy="true"] .lbdp-recherche__contenu {
	opacity: 0.6;
	transition: opacity 0.15s 0.15s;
}

.lbdp-recherche__titre {
	margin: 0 0 0.25rem;
	color: var(--lbdp-texte-3);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
}

.lbdp-recherche__vide {
	margin: 0;
	padding: 0.375rem;
	color: var(--lbdp-texte-3);
	font-size: 0.8125rem;
}

/* Recherches populaires proposées sous « Aucun produit pour … » (lot front n° 3, 05/10/2026). */
.lbdp-recherche__groupe--relance {
	margin-top: 1.125rem;
}

/* Annonce du nombre de résultats (lecteurs d'écran seulement). */
.lbdp-recherche__statut {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

/* Croix « Fermer la recherche » : seulement en plein écran (mobile). */
.lbdp-recherche__fermer {
	display: none;
}

/* Recherches populaires ---------------------------------------------------- */

.lbdp-recherche__groupe--populaires .lbdp-recherche__titre {
	margin-bottom: 0.625rem;
}

.lbdp-recherche__liste--populaires {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.lbdp-recherche__pastille {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 2.125rem;
	padding: 0 0.875rem;
	color: var(--lbdp-texte);
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1;
	background: var(--lbdp-pastille);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.lbdp-recherche__pastille .lbdp-icone {
	flex: none;
	color: var(--lbdp-orange);
}

.lbdp-recherche__pastille:hover,
.lbdp-recherche__pastille[aria-selected="true"] {
	background: var(--lbdp-bord);
}

/* Résultats : produits à gauche, catégories et marques à droite ----------- */

.lbdp-recherche__grille {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 1.5rem;
}

/* Ni catégorie ni marque : la colonne de droite n'est plus écrite, les produits prennent toute la largeur. */
.lbdp-recherche__grille > :only-child {
	grid-column: 1 / -1;
}

.lbdp-recherche__liste--produits {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Produits serrés, séparés par un trait gris très clair (Enes, 09/10/2026). */
.lbdp-recherche__produit {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.25rem 0.375rem;
	border-bottom: 1px solid #F0F0F0;
	color: var(--lbdp-texte);
	text-decoration: none;
	border-radius: var(--lbdp-r);
}

.lbdp-recherche__liste--produits > .lbdp-recherche__produit:last-child {
	border-bottom: 0;
}

.lbdp-recherche__produit:hover,
.lbdp-recherche__produit[aria-selected="true"] {
	color: var(--lbdp-texte);
	background: var(--lbdp-fond);
}

.lbdp-recherche__vignette {
	flex: none;
	width: 5rem; /* 4 produits au lieu de 6, photos plus grandes (Enes, 09/10/2026) */
	height: 5rem;
	object-fit: contain;
	background: #fff;
}

.lbdp-recherche__infos {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lbdp-recherche__nom {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.lbdp-recherche__marque {
	color: var(--lbdp-texte-3);
	font-size: 0.75rem;
}

/* TTC puis HT dessous, comme les cartes (lot front n° 14, 05/10/2026) */
.lbdp-recherche__prix {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	color: var(--lbdp-texte);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

.lbdp-recherche__ht {
	color: var(--lbdp-texte-3);
	font-size: 0.75rem;
	font-weight: 400;
}

.lbdp-recherche__prix--promo {
	color: var(--lbdp-orange);
}

/* Prix promo puis prix d'origine barré sur la même ligne, HT dessous (comme les cartes ; .orig-price : base.css 9) */
.lbdp-recherche__ligne {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
}

.lbdp-recherche__prix .orig-price {
	font-size: 0.75rem;
	font-weight: 400;
}

.lbdp-recherche__cote {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	min-width: 0;
}

.lbdp-recherche__liste--categories {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.lbdp-recherche__categorie {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3125rem 0;
	color: var(--lbdp-texte);
	font-size: 0.875rem;
	text-decoration: none;
}

.lbdp-recherche__categorie .lbdp-icone {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--lbdp-gris-delai);
}

.lbdp-recherche__categorie:hover,
.lbdp-recherche__categorie[aria-selected="true"] {
	color: var(--lbdp-orange);
}

.lbdp-recherche__groupe--marques .lbdp-recherche__titre {
	margin-bottom: 0.5rem;
}

.lbdp-recherche__liste--marques {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.lbdp-recherche__marque-lien {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 0.75rem;
	color: var(--lbdp-texte);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--lbdp-bord);
	border-radius: var(--lbdp-r);
}

.lbdp-recherche__marque-lien:hover,
.lbdp-recherche__marque-lien[aria-selected="true"] {
	border-color: var(--lbdp-orange);
}

.lbdp-recherche__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 90px;
	max-height: 24px;
	object-fit: contain;
}

/* Tous les résultats ------------------------------------------------------ */

.lbdp-recherche__pied {
	margin-top: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--lbdp-bord);
}

.lbdp-recherche__tous {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--lbdp-orange);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.lbdp-recherche__tous:hover {
	color: var(--lbdp-orange-survol);
}

.lbdp-recherche__tous[aria-selected="true"] {
	text-decoration: underline;
}

/* Option choisie au clavier : repère visible en plus du fond. */
.lbdp-recherche__panneau [role="option"][aria-selected="true"] {
	outline: 2px solid var(--lbdp-orange);
	outline-offset: -2px;
}

/* -------------------------------------------------------------------------
 * Mobile : plein écran (champ en haut, liste qui défile dans le panneau)
 * ---------------------------------------------------------------------- */

/* 767.98 px : à 768 px pile, la tablette recevait à la fois cette version et celle de l'ordinateur (min-width: 768px). */
@media (max-width: 767.98px) {
	html.lbdp-recherche-plein-ecran,
	html.lbdp-recherche-plein-ecran body {
		overflow: hidden;
	}

	/* Un ancêtre transformé piégerait le plein écran (position: fixed) : neutralisé le temps de la recherche. */
	.lbdp-entete:has(.lbdp-recherche--plein-ecran) {
		animation: none; /* glissade de la barre fine (base.css 12 ter) : elle déplacerait la recherche avec elle */
		transform: none;
		filter: none;
		backdrop-filter: none;
		contain: none;
		will-change: auto;
	}

	/* Barre du haut : [champ] [loupe orange : rechercher] [croix : fermer] (Enes, 05/10/2026) */
	.lbdp-recherche.lbdp-recherche--plein-ecran {
		position: fixed;
		inset: 0 0 auto;
		z-index: 2147483000;
		display: flex;
		gap: 0.5rem;
		align-items: center;
		width: auto;
		height: auto;
		max-width: none;
		margin: 0;
		padding: 0.5rem 0.375rem 0.5rem 0.75rem;
		background: #fff;
		border: 0;
		border-bottom: 1px solid var(--lbdp-bord);
		border-radius: 0;
		box-shadow: none;
	}

	.lbdp-recherche.lbdp-recherche--plein-ecran .lbdp-recherche__bouton {
		order: 0;
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		min-height: 0;
		margin: 0;
		padding: 0;
		color: #fff;
		background: var(--lbdp-orange);
		border: 0;
		border-radius: var(--lbdp-r);
		box-shadow: none;
	}

	.lbdp-recherche.lbdp-recherche--plein-ecran .lbdp-recherche__champ {
		flex: 1;
		min-width: 0;
		height: 2.75rem;
		min-height: 0;
		margin: 0;
		padding: 0 0.875rem;
		color: var(--lbdp-texte);
		font-size: 1rem; /* 16 px : pas de zoom automatique sur iPhone */
		background: #fff;
		border: 2px solid var(--lbdp-orange);
		border-radius: var(--lbdp-r);
		box-shadow: none;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__fermer {
		order: 1;
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.75rem;
		padding: 0;
		color: var(--lbdp-texte);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__panneau {
		position: fixed;
		top: calc(3.75rem + 1px);
		right: 0;
		bottom: 0;
		left: 0;
		max-height: none;
		padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom));
		overflow-y: auto;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__grille {
		display: flex;
		flex-direction: column;
		gap: 1.125rem;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__titre {
		margin-bottom: 0.375rem;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__pastille {
		height: 2.75rem;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__liste--produits {
		gap: 0;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__produit {
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--lbdp-pastille);
		border-radius: 0;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__produit:hover {
		background: none;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__vignette {
		width: 4.5rem;
		height: 4.5rem;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__marque {
		display: none;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__categorie {
		min-height: 2.75rem;
		padding: 0;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__marque-lien {
		height: 2.75rem;
		padding: 0 0.875rem;
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__logo {
		max-width: 110px;
		max-height: 26px;
	}

	/* « Voir tous les résultats » : vrai bouton orange, détaché des marques (Enes : « trop collé »). */
	.lbdp-recherche--plein-ecran .lbdp-recherche__pied {
		margin-top: 1.75rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--lbdp-bord);
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__tous {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		height: 3rem;
		color: #fff;
		font-size: 0.9375rem;
		background: var(--lbdp-orange);
		border-radius: var(--lbdp-r);
	}

	.lbdp-recherche--plein-ecran .lbdp-recherche__tous:hover,
	.lbdp-recherche--plein-ecran .lbdp-recherche__tous[aria-selected="true"] {
		color: #fff;
		background: var(--lbdp-orange-survol);
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lbdp-recherche__panneau[aria-busy="true"] .lbdp-recherche__contenu {
		transition: none;
	}
}