/* ==========================================================================
   Carnet Pop — recherche instantanée (panneau sous le champ de l'en-tête).
   Réutilise les variables de main.css. Chargé sur toutes les pages par
   inc/theme/live-search.php.
   ========================================================================== */

.searchbox.has-live { z-index: 2; }
.searchbox.is-ls-open input[type="search"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(36, 64, 168, .14); }

.ls-panel {
	position: absolute; z-index: 45; top: calc(100% + 8px); left: 50%;
	width: min(640px, calc(100vw - 2 * var(--gutter, 16px))); transform: translateX(-50%);
	max-height: min(var(--ls-max, 70vh), 640px); overflow-y: auto; overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--card); color: var(--ink);
	border: 1.5px solid var(--ink); border-radius: var(--radius);
	box-shadow: 0 24px 40px -24px rgba(30, 27, 24, .45), 0 2px 0 rgba(30, 27, 24, .06);
	text-align: left; font-size: .95rem; line-height: 1.35;
}
.ls-panel[hidden] { display: none; }
.ls-panel.is-loading .ls-list { opacity: .55; transition: opacity .15s .1s; }
@media (prefers-reduced-motion: no-preference) {
	.ls-panel:not([hidden]) { animation: ls-in .14s ease-out; }
	@keyframes ls-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* Messages (recherche…, aucun résultat) */
.ls-msg { margin: 0; padding: .9rem 1rem; color: var(--ink-2); font-size: .92rem; }
.ls-msg strong { color: var(--ink); font-weight: 650; }
.ls-msg--loading::before {
	content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .55em; vertical-align: -.08em;
	border: 1.5px solid var(--ink-3); border-right-color: transparent; border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) { .ls-msg--loading::before { animation: ls-spin .7s linear infinite; } }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* Sections */
.ls-group { padding: .35rem 0; }
.ls-group + .ls-group { border-top: 1px solid var(--rule); }
.ls-label {
	margin: 0; padding: .55rem 1rem .3rem;
	font: 500 .7rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* Options */
.ls-opt {
	display: flex; align-items: center; gap: .85rem; min-height: 44px; padding: .45rem 1rem;
	color: var(--ink); text-decoration: none; cursor: pointer; position: relative;
}
.ls-opt:hover { color: var(--ink); }
.ls-opt.is-active { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--tomato); }
.ls-opt.is-active:focus-visible, .ls-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ls-opt mark { background: var(--marker); color: inherit; padding: 0 .04em; border-radius: 1px; }

/* Collection */
.ls-opt--col { justify-content: space-between; }
.ls-col__name { font-weight: 600; }
.ls-col__count { flex: none; font: .72rem/1 var(--mono); color: var(--ink-3); letter-spacing: .02em; }

/* Produit */
.ls-thumb {
	flex: none; width: 44px; height: 58px; position: relative; overflow: hidden;
	border-radius: 1px 4px 4px 1px; background: var(--paper-2);
	box-shadow: 0 1px 0 rgba(30, 27, 24, .08), 0 8px 12px -10px rgba(30, 27, 24, .6);
}
.ls-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Mini-couverture (visuel absent) : couleur de la palette du produit, dos et filets. */
.ls-thumb--gen { background: var(--cover-bg, var(--blue)); color: var(--cover-ink, var(--paper)); }
.ls-thumb--gen::before {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(to bottom, transparent 0 6px, currentColor 6px 7px); opacity: .16;
}
.ls-thumb--gen::after {
	content: ""; position: absolute; top: 0; bottom: 0; right: 13%; width: 3px; background: currentColor; opacity: .9;
	box-shadow: -36px 0 0 -0.5px rgba(0, 0, 0, .12);
}
.ls-prod__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ls-prod__title {
	font-weight: 550; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ls-prod__meta { font: .72rem/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-prod__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; white-space: nowrap; }
.ls-prod__price strong { font-weight: 750; }
.ls-prod__price del { font-size: .78rem; color: var(--ink-3); }
.ls-prod__price del + strong { color: var(--tomato-ink, var(--tomato)); }

/* Guide */
.ls-opt--guide::before {
	content: "Guide"; flex: none; padding: .15rem .4rem; border: 1px solid var(--ink); border-radius: 999px;
	font: .64rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}

/* Tous les résultats */
.ls-opt--all {
	justify-content: space-between; border-top: 1px solid var(--ink); margin-top: .1rem; padding-top: .7rem; padding-bottom: .7rem;
	font-weight: 700; background: var(--paper);
	position: sticky; bottom: 0;
}
.ls-opt--all.is-active { background: var(--marker); box-shadow: none; }
.ls-opt--all svg { flex: none; }

/* Mobile et tablette : champ pleine largeur sous le logo → panneau pleine largeur. */
@media (max-width: 1180px) {
	.ls-panel {
		left: calc(-1 * var(--gutter, 16px)); right: calc(-1 * var(--gutter, 16px)); width: auto; transform: none;
		top: calc(100% + .7rem + 1px); /* sous le bord inférieur de l'en-tête */
		max-height: var(--ls-max, 70vh);
		border-left: 0; border-right: 0; border-radius: 0;
		box-shadow: 0 30px 40px -30px rgba(30, 27, 24, .5);
	}
	@media (prefers-reduced-motion: no-preference) {
		.ls-panel:not([hidden]) { animation-name: ls-in-m; }
		@keyframes ls-in-m { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
	}
	.ls-opt { min-height: 48px; padding-left: var(--gutter, 16px); padding-right: var(--gutter, 16px); }
	.ls-label, .ls-msg { padding-left: var(--gutter, 16px); padding-right: var(--gutter, 16px); }
}
@media (max-width: 480px) {
	.ls-prod__meta { font-size: .68rem; }
	.ls-opt--prod { gap: .7rem; }
}