/* =========================================================================
   Batiself — Live search dropdown & header active-state.
   Loaded site-wide alongside header.css.

   TYPOGRAPHY: roles from tokens.css.
     - h4       → .bs-search-col__title
     - body-sm  → .bs-search-result__title (medium override)
     - caption  → .bs-search-result__meta, .bs-search-hint, etc.
     - button   → .bs-search-allcta
   ========================================================================= */  

/* ---------- Wrapper around form + panel --------------------------------
   The wrapper replaces .bs-header__search as the grid item in the top row.
   NOTE: NOT position:relative — we want the panel to anchor on the parent
   .bs-header__top (position:relative) so it can span the full page-container
   width instead of being clamped to the 600px wrapper. */ 
.bs-header__search-wrap {
	width: 100%;
	max-width: 600px;
	justify-self: stretch;
} 

/* ---------- Header active state ----------------------------------------
   When the user focuses the search, the entire header turns white so the
   panel reads cleanly. Specificity-wise we have to OUT-RANK the existing
   `.bs-header--overlay:not(.is-scrolled) .bs-header__top` (0,3,0) rule — 
   so each override is scoped under .bs-header--overlay where needed. */

/* Overlay variant — kill the dark gradient + restore text color. */
body.is-search-active .bs-header--overlay {
	background-image: none;
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--bs-color-text);
}

/* Top row — white opaque + blur on EVERY header variant. */
body.is-search-active .bs-header__top,
body.is-search-active .bs-header--overlay:not(.is-scrolled) .bs-header__top {
	background-color: rgba(255, 255, 255, .98);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom-color: rgba(0, 0, 0, .08);
}

/* Mega bar background pseudo — same treatment. */
body.is-search-active .bs-header__mega::before,
body.is-search-active .bs-header--overlay:not(.is-scrolled) .bs-header__mega::before {
	background-color: rgba(255, 255, 255, .98);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/* Pill search field — white opaque + bordered, on EVERY variant. */
body.is-search-active .bs-header__search,
body.is-search-active .bs-header--overlay:not(.is-scrolled) .bs-header__search {
	background: #fff;
	border-color: var(--bs-color-border);
}

/* Input text — black on white. */
body.is-search-active .bs-header__search-input {
	color: var(--bs-color-text);
}
body.is-search-active .bs-header__search-input::placeholder {
	color: var(--bs-color-muted);
	opacity: 1;
}

/* Submit circle — black bg, white icon, on EVERY variant. */
body.is-search-active .bs-header__search-submit,
body.is-search-active .bs-header--overlay:not(.is-scrolled) .bs-header__search-submit {
	background: var(--bs-color-text);
	color: #fff;
}

/* Primary nav + utility links — flip to black on the now-white header. */
body.is-search-active .bs-header--overlay:not(.is-scrolled) .bs-primary-menu a,
body.is-search-active .bs-header--overlay:not(.is-scrolled) .bs-util {
	color: var(--bs-color-text);
}

/* ---------- Search panel (dropdown) ------------------------------------
   Anchored to .bs-header__top bottom (NOT to the 600px wrap), so we get
   a generous "full-page-container" width that gives all 3 columns room
   to breathe. left/right + max-width + margin auto centers the panel
   inside the top row, matching the page container's gutters. */
.bs-header__search-panel {
	position: absolute;
	top: calc(100% + 12px);
	left: var(--bs-container-pad);
	right: var(--bs-container-pad);
	max-width: var(--bs-container-w);
	margin-left: auto;
	margin-right: auto;
	z-index: 1100;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
	padding: var(--bs-space-lg);
	max-height: 78vh;
	overflow-y: auto;
	color: var(--bs-color-text);
	/* Smooth fade-in when the search opens (on focus → body.is-search-active).
	   Visibility is driven by opacity/visibility here rather than the [hidden]
	   attribute so it can transition. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
/* Keep it in the layout (display:block) so the fade can run — the visibility
   is handled by the opacity/visibility rules above, not by [hidden]. */
.bs-header__search-panel[hidden] { display: block; }
body.is-search-active .bs-header__search-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .22s ease, transform .22s ease;
}
@media (prefers-reduced-motion: reduce) {
	.bs-header__search-panel { transition: none; transform: none; }
}

/* Content inside the panel rises + fades in (columns lightly staggered),
   so results, the hint, loading and empty states all appear smoothly. */
.bs-search-grid > .bs-search-col,
.bs-search-hint,
.bs-search-loading,
.bs-search-empty,
.bs-search-allcta {
	animation: bs-search-rise .26s ease both;
}
.bs-search-grid > .bs-search-col:nth-child(2) { animation-delay: .05s; }
.bs-search-grid > .bs-search-col:nth-child(3) { animation-delay: .1s; }
@keyframes bs-search-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bs-search-grid > .bs-search-col,
	.bs-search-hint,
	.bs-search-loading,
	.bs-search-empty,
	.bs-search-allcta { animation: none; }
}

/* Results grid — s'adapte au nombre de colonnes NON vides (les colonnes vides
   ne sont plus rendues, cf. search.js → les colonnes pleines prennent la place). */
.bs-search-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bs-space-md);
}
.bs-search-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.bs-search-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-search-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) {
	.bs-search-grid,
	.bs-search-grid--cols-1,
	.bs-search-grid--cols-2,
	.bs-search-grid--cols-3 { grid-template-columns: 1fr; }
}

/* Column heading — role: h4 (Blue, like all titles on white bg). */
.bs-search-col__title {
	margin: 0 0 var(--bs-space-sm);
	padding-bottom: var(--bs-space-xs);
	border-bottom: 1px solid var(--bs-color-border);
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	line-height:    var(--bs-type-h4-leading);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}

.bs-search-col__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bs-search-col__empty {
	margin: 0;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
}

/* ---------- A single result row ---------------------------------------- */
.bs-search-result {
	display: flex;
	align-items: center;
	gap: var(--bs-space-sm);
	padding: var(--bs-space-xs);
	color: var(--bs-color-text);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .15s ease, border-color .15s ease;
}
.bs-search-result:hover {
	background: var(--bs-color-bg-alt);
	border-color: var(--bs-color-border);
}

.bs-search-result__media {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--bs-color-bg-alt);
	overflow: hidden;
}
.bs-search-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bs-search-result__media-fallback {
	width: 100%;
	height: 100%;
	display: block;
}

.bs-search-result__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Result title — role: body-sm with medium weight + 2-line clamp. */
.bs-search-result__title {
	color: var(--bs-color-text);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-medium);
	line-height:    var(--bs-leading-snug);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Result meta — role: caption. price html (.amount, etc.) inherits this. */
.bs-search-result__meta,
.bs-search-result__meta * {
	font-size:      var(--bs-text-xs);
	font-weight:    var(--bs-weight-medium);
	line-height:    var(--bs-leading-snug);
	color: var(--bs-color-muted);
}
.bs-search-result__meta .amount,
.bs-search-result__meta ins .amount {
	color: var(--bs-color-primary);
}

/* ---------- See-all CTA below the columns ------------------------------ */
.bs-search-allcta {
	display: block;
	margin-top: var(--bs-space-md);
	padding: var(--bs-space-sm) var(--bs-space-md);
	text-align: center;
	background: var(--bs-color-primary);
	color: #fff;
	text-decoration: none;
	transition: background .2s ease;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	line-height:    var(--bs-type-button-leading);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
.bs-search-allcta:hover { background: var(--bs-color-primary-dark); }

/* ---------- Hint / loading / empty states ------------------------------ */
.bs-search-hint,
.bs-search-loading,
.bs-search-empty {
	padding: var(--bs-space-md);
	text-align: center;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
}
.bs-search-empty p { margin: 0; }

/* ---------- Mobile hide ------------------------------------------------ */
@media (max-width: 900px) {
	.bs-header__search-wrap { display: none; }
}

/* =========================================================================
   FULL SEARCH RESULTS PAGE (search.php)
   Convention-aligned: home-container width, h2 titles in Blue, product/
   project cards reused from existing components.
   ========================================================================= */

.batiself-search { background: #fff; }

/* ---- Hero ------------------------------------------------------------- */
.bs-search-hero {
	background: var(--bs-color-bg-alt);
	padding: var(--bs-space-xl) 0 var(--bs-space-lg);
	border-bottom: 1px solid var(--bs-color-border);
}
.bs-search-hero__eyebrow {
	margin: 0 0 var(--bs-space-xs);
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	line-height:    var(--bs-type-eyebrow-leading);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-search-hero__title {
	margin: 0 0 var(--bs-space-sm);
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.bs-search-hero__title span {
	color: var(--bs-color-text);
}
.bs-search-hero__count {
	margin: 0 0 var(--bs-space-xs);
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
}
/* Short reassuring tagline below the result count. */
.bs-search-hero__intro {
	max-width: 560px;
	margin: 0 0 var(--bs-space-md);
	color: var(--bs-color-text);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
}
.bs-search-hero__form {
	display: flex;
	gap: var(--bs-space-sm);
	max-width: 640px;
	align-items: stretch;
}
.bs-search-hero__input {
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	border-radius: 999px;
	padding: 14px 24px;
	color: var(--bs-color-text);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
	letter-spacing: var(--bs-type-body-tracking);
}
.bs-search-hero__input:focus {
	outline: none;
	border-color: var(--bs-color-primary);
}

/* ---- Empty state ------------------------------------------------------ */
.bs-search-empty-state {
	padding: var(--bs-section-pad-y) 0;
	text-align: center;
}
.bs-search-empty-state .home-section__title { color: var(--bs-color-primary); }
.bs-search-empty-state__text {
	margin: var(--bs-space-sm) auto var(--bs-space-lg);
	max-width: 520px;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-size);
	line-height:    var(--bs-type-body-leading);
}
.bs-search-empty-state__ctas {
	display: flex;
	justify-content: center;
	gap: var(--bs-space-sm);
	flex-wrap: wrap;
}

/* ---- Result sections -------------------------------------------------- */
/* Tighter vertical rhythm than other pages — search results are an e-commerce
   utility view, density is more important than editorial breathing. */
.bs-search-section { padding: var(--bs-space-xl) 0; }
.bs-search-section--alt { background: var(--bs-color-bg-alt); }

/* Reduce the gap between section header and content on search results. */
.bs-search-section .home-section__header {
	margin-bottom: var(--bs-space-md);
}

.bs-search-section__more {
	display: flex;
	justify-content: center;
	margin-top: var(--bs-space-lg);
}

/* PRODUCTS section keeps a CLEAN WHITE background so cards pop and the
   layout reads as a standard e-commerce results page. Overrides --alt. */
.bs-search-products { background: #fff; }

/* ---- 1. Categories grid ----------------------------------------------
   Reuses the canonical .bs-categories-grid + .bs-category-card components
   defined in home.css — same visual everywhere on the site (home
   references, category sub-categories, sibling categories). The only
   search-specific addition is the small "X produits" count below the
   label inside each card. */
.bs-search-cats__grid {
	/* Inherits all base grid + card rules from .bs-categories-grid in
	   home.css. No layout override needed here. */
}

/* Search results cards reuse the canonical card but STACK image + title +
   "X produits" count vertically (instead of the in-image white box used on the
   home/category showcases) — easier to scan on a results page. */
.bs-search-cats__grid .bs-category-card { aspect-ratio: auto; }
.bs-search-cats__grid .bs-category-card__link {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bs-color-border);
}
.bs-search-cats__grid .bs-category-card__media {
	position: relative;
	inset: auto;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
}
.bs-search-cats__grid .bs-category-card__label {
	position: static;
	max-width: none;
	padding: var(--bs-space-sm) var(--bs-space-md) 2px;
}
.bs-category-card__count {
	display: block;
	padding: 0 var(--bs-space-md) var(--bs-space-sm);
	background: #fff;
	color: var(--bs-color-muted);
	font-size:      var(--bs-text-xs);
	font-weight:    var(--bs-type-body-sm-weight);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}

/* ---- 2. Products section (sidebar + main grid layout) ---------------- */
.bs-search-products__sidebar { min-width: 0; }
.bs-search-products__main    { min-width: 0; }
.bs-search-products__no-match {
	padding: var(--bs-space-xl) var(--bs-space-md);
	text-align: center;
	color: var(--bs-color-muted);
	background: #fff;
	border: 1px dashed var(--bs-color-border);
	font-size:      var(--bs-type-body-size);
	line-height:    var(--bs-type-body-leading);
}

/* ---- Mobile filter button (visible <900px only) ---------------------- */
.bs-search-filter-toggle {
	display: none;
	align-items: center;
	gap: var(--bs-space-xs);
	margin-bottom: var(--bs-space-md);
	padding: 12px 20px;
	background: var(--bs-color-text);
	color: #fff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}

/* Backdrop sits below the drawer, above the page. Hidden by default. */
.bs-search-filter-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 1090;
	opacity: 0;
	transition: opacity .25s ease;
}

/* Drawer header (mobile only) — visible inside the slide-in drawer. */
.bs-search-products__drawer-header {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: var(--bs-space-sm) var(--bs-space-md);
	border-bottom: 1px solid var(--bs-color-border);
}
.bs-search-products__drawer-title {
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
	color: var(--bs-color-primary);
}
.bs-search-products__drawer-close {
	background: transparent;
	border: 0;
	padding: var(--bs-space-2xs);
	cursor: pointer;
	color: var(--bs-color-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bs-search-products__drawer-close:hover { color: var(--bs-color-primary); }

/* ---- Desktop sidebar stays as-is, drawer mode kicks in below 900px ----
   Below the breakpoint:
   - The "Filtrer" button appears above the grid
   - The sidebar slides in from the LEFT as a full-height drawer
   - The backdrop fades in behind it
   - Body scroll is implicitly OK (drawer scrolls internally) */
@media (max-width: 900px) {
	.bs-search-filter-toggle { display: inline-flex; }

	.bs-search-products__drawer-header { display: flex; }

	/* Drawer hidden off-canvas by default. */
	.bs-search-products__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(360px, 86vw);
		max-width: 100vw;
		background: #fff;
		z-index: 1100;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .3s cubic-bezier(.2,.8,.2,1);
		box-shadow: 0 0 40px rgba(0, 0, 0, .12);
	}
	.bs-search-products__sidebar .bs-filter__form {
		padding: var(--bs-space-md);
	}

	/* Open state — toggled by JS on <body>. */
	body.is-filter-open .bs-search-products__sidebar {
		transform: translateX(0);
	}
	body.is-filter-open .bs-search-filter-backdrop {
		display: block;
		opacity: 1;
	}
	body.is-filter-open {
		overflow: hidden; /* lock background scroll while drawer is open */
	}

	/* Grid becomes single-column (sidebar is now off-flow). */
	.bs-search-products .cat-catalog__layout {
		grid-template-columns: 1fr;
	}
}

/* ---- Projects grid (specific to search page) -------------------------
   Reuses the canonical .bs-project-card visual from home.css (portrait
   2:3, dark gradient overlay, outlined arrow CTA) — same component as
   the home / category / single-project rails and the archive. Only the
   grid wrapper is search-specific. */
.bs-search-projects-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-space-sm);
}
@media (max-width: 1100px) { .bs-search-projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .bs-search-projects-grid { grid-template-columns: 1fr; } }

/* ---- Blog posts grid -------------------------------------------------- */
.bs-search-posts-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-space-md);
}
@media (max-width: 900px) { .bs-search-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bs-search-posts-grid { grid-template-columns: 1fr; } }

.bs-search-post-card {
	background: #fff;
	border: 1px solid var(--bs-color-border);
	transition: border-color .25s ease;
}
.bs-search-post-card:hover {
	border-color: var(--bs-color-primary);
}
.bs-search-post-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.bs-search-post-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bs-color-bg-alt);
}
.bs-search-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bs-search-post-card__body {
	padding: var(--bs-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-xs);
}
.bs-search-post-card__date {
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-caption-size);
	font-weight:    var(--bs-type-caption-weight);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.bs-search-post-card__title {
	margin: 0;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-type-h3-weight);
	line-height:    var(--bs-type-h3-leading);
}
.bs-search-post-card__excerpt {
	margin: 0;
	color: var(--bs-color-text);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
}