/* ==========================================================================
   Eenov Algolia – styles de l'overlay de recherche
   Palette : --ee-primary-color: #372C1C | --ee-accent-color: #90AB0D
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper principal (injecté dans #conteneur_search)
   -------------------------------------------------------------------------- */

#ee-algolia-wrapper {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	font-size:       1.4rem;
	color:           var( --ee-primary-color, #372C1C );
	box-sizing:      border-box;
}

/* --------------------------------------------------------------------------
   En-tête : barre de recherche + bouton fermer
   -------------------------------------------------------------------------- */

#ee-algolia-header {
	display:         flex;
	align-items:     center;
	gap:             16px;
	padding:         20px 30px;
	border-bottom:   1px solid #e5e5e5;
	background:      #fff;
	position:        sticky;
	top:             0;
	z-index:         10;
	flex-shrink:     0;
}

/* — Searchbox — */

#ee-algolia-searchbox {
	flex: 1;
}

.ee-searchbox-form {
	display:         flex;
	align-items:     center;
	border:          1px solid #ccc;
	border-radius:   4px;
	overflow:        hidden;
	background:      #fff;
	transition:      border-color 0.2s;
}

.ee-searchbox-form:focus-within {
	border-color:    var( --ee-accent-color, #90AB0D );
	outline:         2px solid color-mix(in srgb, var( --ee-accent-color, #90AB0D ) 30%, transparent);
}

.ee-searchbox-input {
	flex:            1;
	border:          none !important;
	outline:         none !important;
	padding:         10px 14px;
	font-size:       1.5rem;
	font-family:     inherit;
	color:           var( --ee-primary-color, #372C1C );
	background:      transparent;
}

.ee-searchbox-input::placeholder {
	color:           #aaa;
}

.ee-searchbox-submit {
	background:  none;
	border:      none;
	padding:     8px 12px;
	cursor:      pointer;
	color:       #888;
	display:     flex;
	align-items: center;
}

.ee-searchbox-reset {
	display: none !important;
}

/* — Logo dans l'overlay — */

#ee-algolia-logo {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

#ee-algolia-logo img {
	height:    40px;
	width:     auto;
	display:   block;
}

.ee-searchbox-submit:hover,
.ee-searchbox-reset:hover {
	color: var( --ee-accent-color, #90AB0D );
}

.ais-SearchBox-submitIcon,
.ais-SearchBox-resetIcon {
	width:  16px;
	height: 16px;
}

/* — Bouton fermer — */

.ee-algolia-btn-close {
	background:   none;
	border:       none;
	cursor:       pointer;
	padding:      6px;
	color:        var( --ee-primary-color, #372C1C );
	border-radius: 50%;
	display:      flex;
	align-items:  center;
	transition:   background 0.2s;
	flex-shrink:  0;
}

.ee-algolia-btn-close:hover {
	background: #f0f0f0;
}

/* --------------------------------------------------------------------------
   Corps : sidebar + résultats
   -------------------------------------------------------------------------- */

#ee-algolia-body {
	display:        none; /* caché tant qu'il n'y a pas de requête */
	flex:           1;
	overflow:       hidden;
}

#ee-algolia-body.ee-algolia-body--visible {
	display:        flex;
}

/* — Sidebar — */

#ee-algolia-sidebar {
	width:          240px;
	min-width:      200px;
	flex-shrink:    0;
	padding:        20px;
	border-right:   1px solid #e5e5e5;
	overflow-y:     auto;
	background:     #fafafa;
}

.ee-algolia-panel {
	margin-bottom:  24px;
}

.ee-algolia-panel-title {
	font-size:      1.2rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:         0 0 10px;
	color:          var( --ee-primary-color, #372C1C );
}

/* — Zone résultats — */

#ee-algolia-results {
	flex:        1;
	padding:     20px 24px;
	overflow-y:  auto;
}

/* — Stats — */

.ee-stats {
	font-size:     1.2rem;
	color:         #888;
	margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Grille des résultats (hits)
   -------------------------------------------------------------------------- */

.ee-hits {}

.ee-hits-list {
	list-style:             none;
	margin:                 0;
	padding:                0;
	display:                grid;
	grid-template-columns:  repeat( auto-fill, minmax( 160px, 1fr ) );
	gap:                    16px;
}

.ee-hits-item {
	border: none;
	padding: 0;
}

.ee-hits-link {
	display:        flex;
	flex-direction: column;
	text-decoration: none;
	color:          inherit;
	border:         1px solid #ebebeb;
	border-radius:  6px;
	overflow:       hidden;
	transition:     box-shadow 0.2s, transform 0.15s;
}

.ee-hits-link:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	transform:  translateY( -2px );
}

/* — Thumbnail — */

.ee-hits-thumb {
	position:   relative;
	background: #f5f5f5;
	aspect-ratio: 4 / 3;
	overflow:   hidden;
}

.ee-hits-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.3s;
}

.ee-hits-link:hover .ee-hits-thumb img {
	transform: scale( 1.04 );
}

/* — Rubans — */

.ruban {
	position:      absolute;
	top:           8px;
	left:          0;
	padding:       3px 8px;
	font-size:     1.1rem;
	font-weight:   700;
	color:         #fff;
	z-index:       2;
	border-radius: 0 3px 3px 0;
}

/* — Badge promo — */

.ee-badge {
	position:      absolute;
	top:           8px;
	right:         8px;
	padding:       3px 7px;
	border-radius: 3px;
	font-size:     1.1rem;
	font-weight:   700;
	z-index:       2;
}

.ee-badge--sale {
	background: var( --ee-accent-color, #90AB0D );
	color:      #fff;
}

/* — Infos produit — */

.ee-hits-info {
	padding:    10px 12px;
}

.ee-hits-title {
	font-size:     1.3rem;
	font-weight:   600;
	margin:        0 0 4px;
	line-height:   1.3;
	color:         var( --ee-primary-color, #372C1C );
}

/* Surlignage du terme recherché */
.ais-Highlight-highlighted,
mark {
	background:     color-mix(in srgb, var( --ee-accent-color, #90AB0D ) 20%, transparent);
	color:          inherit;
	font-weight:    700;
	border-radius:  2px;
	padding:        0 1px;
}

.ee-hits-price {
	font-size:  1.3rem;
	font-weight: 600;
	color:      var( --ee-accent-color, #90AB0D );
	margin:     0;
}

.ee-stock {
	font-size:     1.1rem;
	font-weight:   600;
	margin-top:    4px;
	display:       inline-block;
}

.ee-stock--out {
	color: #c0392b;
}

/* — Aucun résultat — */

.ee-hits-empty {
	text-align:  center;
	padding:     40px 20px;
	color:       #888;
	font-size:   1.4rem;
	line-height: 1.6;
}

.ee-hits-empty strong {
	color: var( --ee-primary-color, #372C1C );
}

/* --------------------------------------------------------------------------
   Listes de filtres (RefinementList)
   -------------------------------------------------------------------------- */

.ee-refinement-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ee-refinement-item {
	margin-bottom: 6px;
}

.ee-refinement-label {
	display:     flex;
	align-items: center;
	gap:         8px;
	cursor:      pointer;
	font-size:   1.3rem;
	color:       #444;
	transition:  color 0.15s;
}

.ee-refinement-label:hover {
	color: var( --ee-primary-color, #372C1C );
}

.ee-refinement-item--active .ee-refinement-label {
	color:      var( --ee-accent-color, #90AB0D );
	font-weight: 700;
}

.ee-refinement-checkbox {
	accent-color: var( --ee-accent-color, #90AB0D );
	width:        15px;
	height:       15px;
	flex-shrink:  0;
}

.ee-refinement-count {
	margin-left:   auto;
	background:    #eee;
	border-radius: 10px;
	padding:       1px 7px;
	font-size:     1.1rem;
	color:         #666;
	flex-shrink:   0;
}

.ee-refinement-item--active .ee-refinement-count {
	background: color-mix(in srgb, var( --ee-accent-color, #90AB0D ) 15%, transparent);
	color:      var( --ee-accent-color, #90AB0D );
}

.ee-refinement-showmore {
	background:  none;
	border:      none;
	color:       var( --ee-accent-color, #90AB0D );
	cursor:      pointer;
	font-size:   1.2rem;
	padding:     4px 0;
	margin-top:  4px;
	text-decoration: underline;
}

.ee-refinement-showmore:hover {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Bouton "Effacer les filtres"
   -------------------------------------------------------------------------- */

.ee-clear-btn {
	display:       inline-block;
	margin-top:    10px;
	padding:       6px 14px;
	border:        1px solid #ccc;
	border-radius: 4px;
	background:    #fff;
	cursor:        pointer;
	font-size:     1.2rem;
	color:         #666;
	transition:    border-color 0.2s, color 0.2s;
}

.ee-clear-btn:hover {
	border-color: var( --ee-primary-color, #372C1C );
	color:        var( --ee-primary-color, #372C1C );
}

.ais-ClearRefinements-button--disabled {
	display: none;
}

/* --------------------------------------------------------------------------
   Responsive : mobile (overlay plein écran, sidebar masquée)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Scroll lock
   -------------------------------------------------------------------------- */

body.disable-scroll {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Backdrop (sombre derrière la recherche)
   -------------------------------------------------------------------------- */

#ee-search-backdrop {
	position:       fixed;
	inset:          0;
	background:     rgba( 0, 0, 0, 0.55 );
	z-index:        998;
	opacity:        0;
	visibility:     hidden;
	pointer-events: none;
	transition:     opacity 0.35s ease,
	                visibility 0s linear 0.35s;
}

#ee-search-backdrop.is-open {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
	transition:     opacity 0.35s ease,
	                visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   Fausse barre de recherche (déclencheur dans l'en-tête)
   -------------------------------------------------------------------------- */

.ee-search-fake {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         8px 18px;
	border:          1px solid #d0d0d0;
	border-radius:   999px;
	background:      #fff;
	color:           #888;
	font-size:       1.4rem;
	cursor:          pointer;
	white-space:     nowrap;
	transition:      border-color 0.2s, box-shadow 0.2s;
	min-width:       220px;
}

.ee-search-fake:hover {
	border-color: var( --ee-accent-color, #90AB0D );
	box-shadow:   0 0 0 3px color-mix( in srgb, var( --ee-accent-color, #90AB0D ) 20%, transparent );
}

.ee-search-fake svg {
	flex-shrink: 0;
	opacity:     0.5;
}

@media ( max-width: 600px ) {
	.ee-search-fake span { display: none; }
	.ee-search-fake { min-width: unset; padding: 8px 12px; }
}

/* --------------------------------------------------------------------------
   Wrapper : toujours fixed, hors flux, caché par défaut via translateY
   -------------------------------------------------------------------------- */

#ee-algolia-wrapper {
	position:   fixed;
	top:        0;
	left:       0;
	right:      0;
	z-index:    999;
	max-height: 85vh;
	overflow:   hidden auto;
	box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.18 );
	background: #fff;
	transform:  translateY( -100% );
	visibility: hidden;
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            visibility 0s linear 0.45s;
}

#ee-algolia-wrapper.ee-search-active {
	transform:  translateY( 0 );
	visibility: visible;
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   Home panel (vide / < 3 chars)
   -------------------------------------------------------------------------- */

#ee-algolia-home {
	display:    none;
	flex:       1;
	overflow-y: auto;
	padding:    20px 30px;
}

#ee-algolia-home.ee-algolia-home--visible {
	display: block;
}

/* — Historique — */

.ee-recent-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   10px;
}

.ee-recent-label {
	font-size:      1.2rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var( --ee-primary-color, #372C1C );
}

.ee-recent-clear-all {
	background:      none;
	border:          none;
	cursor:          pointer;
	font-size:       1.2rem;
	color:           var( --ee-accent-color, #90AB0D );
	text-decoration: underline;
	padding:         0;
}

.ee-recent-clear-all:hover {
	text-decoration: none;
}

.ee-recent-tags {
	display:       flex;
	flex-wrap:     wrap;
	gap:           8px;
	margin-bottom: 24px;
}

.ee-recent-tag {
	display:       flex;
	align-items:   center;
	background:    #f0f0f0;
	border-radius: 20px;
	overflow:      hidden;
}

.ee-recent-tag-btn {
	background: none;
	border:     none;
	cursor:     pointer;
	font-size:  1.3rem;
	padding:    5px 10px 5px 14px;
	color:      var( --ee-primary-color, #372C1C );
	font-family: inherit;
}

.ee-recent-tag-btn:hover {
	color: var( --ee-accent-color, #90AB0D );
}

.ee-recent-tag-remove {
	background:  none;
	border:      none;
	cursor:      pointer;
	font-size:   1.5rem;
	padding:     4px 10px 4px 4px;
	color:       #999;
	line-height: 1;
}

.ee-recent-tag-remove:hover {
	color: #cc0000;
}

/* — Grid populaires + recommandés — */

#ee-algolia-home-grid {
	display: flex;
	gap:     32px;
}

#ee-algolia-popular {
	width:      200px;
	flex-shrink: 0;
}

#ee-algolia-recommended {
	flex:      1;
	min-width: 0;
}

.ee-home-title {
	font-size:      1.2rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:         0 0 14px;
	color:          var( --ee-primary-color, #372C1C );
}

/* — Liste catégories populaires — */

.ee-popular-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ee-popular-item {
	margin-bottom: 8px;
}

.ee-popular-link {
	text-decoration: none;
	font-size:       1.3rem;
	color:           #444;
	transition:      color 0.15s;
}

.ee-popular-link:hover {
	color: var( --ee-accent-color, #90AB0D );
}

/* — Slider produits recommandés — */

.ee-reco-slider-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.ee-reco-viewport {
	flex:     1;
	overflow: hidden;
}

.ee-reco-track {
	display:    flex;
	gap:        12px;
	transition: transform 0.3s ease;
}

.ee-reco-card {
	flex:            0 0 160px;
	display:         flex;
	flex-direction:  column;
	text-decoration: none;
	color:           inherit;
	border:          1px solid #ebebeb;
	border-radius:   8px;
	overflow:        hidden;
	transition:      box-shadow 0.2s, transform 0.15s;
}

.ee-reco-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.10);
	transform:  translateY( -2px );
}

.ee-reco-img {
	aspect-ratio: 4/3;
	overflow:     hidden;
	background:   #f5f5f5;
}

.ee-reco-img img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform 0.3s;
}

.ee-reco-card:hover .ee-reco-img img {
	transform: scale( 1.04 );
}

.ee-reco-info {
	padding: 8px 10px;
}

.ee-reco-title {
	font-size:             1.2rem;
	font-weight:           600;
	margin:                0 0 4px;
	line-height:           1.3;
	color:                 var( --ee-primary-color, #372C1C );
	display:               -webkit-box;
	-webkit-line-clamp:    2;
	-webkit-box-orient:    vertical;
	overflow:              hidden;
}

.ee-reco-price {
	font-size:   1.2rem;
	font-weight: 600;
	color:       var( --ee-accent-color, #90AB0D );
	margin:      0;
}

.ee-reco-arrow {
	background:    #fff;
	border:        1px solid #ddd;
	border-radius: 50%;
	width:         32px;
	height:        32px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	cursor:        pointer;
	font-size:     2rem;
	line-height:   1;
	color:         var( --ee-primary-color, #372C1C );
	flex-shrink:   0;
	transition:    background 0.15s;
	padding:       0;
}

.ee-reco-arrow:hover:not( :disabled ) {
	background: #f0f0f0;
}

.ee-reco-arrow:disabled {
	opacity: 0.3;
	cursor:  default;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 768px ) {

	#ee-algolia-header {
		padding: 14px 16px;
	}

	#ee-algolia-home {
		padding: 16px;
	}

	#ee-algolia-home-grid {
		flex-direction: column;
		gap: 24px;
	}

	#ee-algolia-popular {
		width: 100%;
	}

	.ee-reco-track {
		gap: 8px;
	}

	.ee-reco-card {
		flex: 0 0 130px;
	}

	#ee-algolia-body.ee-algolia-body--visible {
		flex-direction: column;
	}

	#ee-algolia-sidebar {
		width:         100%;
		border-right:  none;
		border-bottom: 1px solid #e5e5e5;
		display:       none;
	}

	.ee-hits-list {
		grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
		gap: 10px;
	}
}