/*
 * La recherche et la page introuvable (404). Balisage : inc/recherche.php.
 * Pas de maquette avant l'intégration : planches dessinées après (p5.py).
 * Tuiles d'univers : css/catalogue.css ; cartes : css/carte.css ; état
 * vide et pagination : css/filtres.css.
 */

/* --- pel-search-form ---------------------------------------------------------- */
.pel-search-form {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	max-width: calc(var(--pel-container) * 0.6);
}

.pel-search-form__label {
	color: var(--pel-encre);
	font-size: var(--pel-fs-small);
	font-weight: 600;
}

.pel-search-form__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-xs);
}

.pel-search-form__champ {
	flex: 1 1 calc(var(--pel-container) * 0.2);
	min-width: 0;
}

/* --- La page de résultats ------------------------------------------------------ */
.pel-recherche__titre {
	margin: var(--pel-space-s) 0 var(--pel-space-m);
	font-size: var(--pel-fs-h1);
	line-height: var(--pel-lh-titre);
	overflow-wrap: anywhere;
}

.pel-recherche__compte {
	margin: 0 0 var(--pel-space-m);
	font-size: var(--pel-fs-h3);
	overflow-wrap: anywhere;
}

.pel-recherche__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0 0 var(--pel-space-m);
	padding: 0;
	list-style: none;
}

/* --- La page introuvable ------------------------------------------------------- */
.pel-introuvable__code {
	margin: 0 0 var(--pel-space-s);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales);
	text-transform: uppercase;
}

.pel-introuvable__titre {
	margin: 0 0 var(--pel-space-s);
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-introuvable__texte {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-introuvable__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-xs);
	margin: var(--pel-space-m) 0 0;
}

@media (max-width: 991px) {
	.pel-recherche__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 478px) {
	.pel-recherche__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Le bouton passe sous le champ : toute la largeur, comme lui. */
	.pel-search-form__envoi {
		flex: 1 1 100%;
	}
}

/* --- La recherche instantanée (#332) -------------------------------------------- */
/* Le panneau qu'ouvre la loupe, sous l'en-tête collant (Bricks : 998). */
.pel-recherche-vive {
	position: fixed;
	inset: var(--header-h, var(--pel-entete-h)) 0 auto;
	z-index: 1000;
	max-height: calc(100vh - var(--header-h, var(--pel-entete-h)));
	overflow-y: auto;
	padding: var(--pel-space-m) 0;
	border-bottom: var(--pel-filet) solid var(--pel-lin);
	background: var(--pel-ivoire);
	box-shadow: var(--pel-shadow-m);
}

.pel-recherche-vive[hidden] {
	display: none;
}

.pel-recherche-vive__boite {
	position: relative;
}

.pel-recherche-vive .pel-search-form {
	max-width: none;
	padding-right: calc(var(--pel-btn-sm-h) + var(--pel-space-s));
}

.pel-recherche-vive__fermer {
	position: absolute;
	top: 0;
	right: var(--pel-gutter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pel-btn-sm-h);
	height: var(--pel-btn-sm-h);
	padding: 0;
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-blanc);
	color: var(--pel-encre);
	cursor: pointer;
}

.pel-recherche-vive__icone {
	width: var(--pel-icone-s);
	height: var(--pel-icone-s);
}

/* La liste des suggestions, sous le champ. */
.pel-search-form {
	position: relative;
}

.pel-suggestions {
	margin: var(--pel-space-2xs) 0 0;
	padding: var(--pel-space-3xs);
	list-style: none;
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-m);
	background: var(--pel-blanc);
	box-shadow: var(--pel-shadow-s);
}

.pel-suggestions[hidden] {
	display: none;
}

.pel-suggestions__lien {
	display: flex;
	align-items: center;
	gap: var(--pel-space-xs);
	padding: var(--pel-space-2xs) var(--pel-space-xs);
	border-radius: var(--pel-radius-s);
	color: var(--pel-encre);
	text-decoration: none;
}

.pel-suggestions__option.is-active .pel-suggestions__lien,
.pel-suggestions__lien:hover {
	background: var(--pel-champagne-pale);
}

.pel-suggestions__vignette {
	flex: none;
	width: var(--pel-vignette-s);
	height: var(--pel-vignette-s);
	border-radius: var(--pel-radius-s);
	background: var(--pel-sable);
	object-fit: contain;
}

.pel-suggestions__type {
	flex: none;
	padding: 0 var(--pel-space-2xs);
	border: var(--pel-filet) solid var(--pel-champagne);
	border-radius: var(--pel-radius-pill);
	color: var(--pel-terre-foncee);
	font-size: var(--pel-fs-small);
}

.pel-suggestions__nom {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pel-suggestions__trouve {
	padding: 0;   /* une règle générale de mark en met (#334) */
	background: none;
	color: inherit;
	font-weight: 700;
}

.pel-suggestions__prix {
	flex: none;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	white-space: nowrap;
}

.pel-suggestions__option--tous {
	margin-top: var(--pel-space-3xs);
	border-top: var(--pel-filet) solid var(--pel-lin);   /* décoratif */
}

.pel-suggestions__option--tous .pel-suggestions__lien {
	color: var(--pel-terre-foncee);
	font-weight: 600;
}

.pel-suggestions__rien {
	padding: var(--pel-space-2xs) var(--pel-space-xs);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
}

/* Sur mobile, le prix passe sous le nom. */
@media (max-width: 767px) {
	.pel-suggestions__lien {
		flex-wrap: wrap;
	}

	.pel-suggestions__nom {
		flex-basis: calc(100% - var(--pel-vignette-s) - var(--pel-space-xs));
	}

	.pel-suggestions__prix {
		flex-basis: 100%;
		margin-top: calc(-1 * var(--pel-space-xs));
		padding-left: calc(var(--pel-vignette-s) + var(--pel-space-xs));
	}
}