/* ==========================================================================
   LS Ambient Light - Filtre par Marque
   La barre de filtres est stylée ici. La grille produits utilise le rendu
   du thème (Liquid) quand il est présent — on n'impose donc PAS de grille CSS
   sur .lsaf-products en mode Liquid. Une grille maison n'est appliquée qu'en
   mode autonome (.lsaf-columns-*), pour les thèmes non-Liquid.
   ========================================================================== */

.lsaf-wrapper {
	width: 100%;
}

/* --- Barre de filtres (icônes marques) --- */
.lsaf-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0 0 40px;
}

.lsaf-filter-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 12px;
	padding: 14px 20px;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

.lsaf-filter-btn:hover {
	border-color: rgba(128, 128, 128, 0.6);
	transform: translateY(-2px);
}

.lsaf-filter-btn.is-active {
	border-color: currentColor;
	background-color: rgba(128, 128, 128, 0.08);
}

.lsaf-filter-btn .lsaf-icon {
	width: 36px;
	height: 36px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.lsaf-filter-btn.is-active .lsaf-icon,
.lsaf-filter-btn:hover .lsaf-icon {
	filter: none;
	opacity: 1;
}

.lsaf-filter-btn .lsaf-label {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.85;
}

.lsaf-filter-btn[data-brand="all"] {
	justify-content: center;
	padding: 14px 24px;
}

/* --- Masquage des produits filtrés (les deux modes) --- */
.lsaf-product-item.lsaf-hidden,
.lsaf-products > li.lsaf-hidden {
	display: none !important;
}

.lsaf-empty-msg {
	text-align: center;
	opacity: 0.6;
	margin-top: 30px;
}

/* --- Grille MAISON : uniquement en mode autonome (thème non-Liquid) --- */
ul.lsaf-products.lsaf-columns-1 { grid-template-columns: repeat(1, 1fr); }
ul.lsaf-products.lsaf-columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.lsaf-products.lsaf-columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.lsaf-products.lsaf-columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.lsaf-products.lsaf-columns-5 { grid-template-columns: repeat(5, 1fr); }

ul.lsaf-products[class*="lsaf-columns-"] {
	display: grid;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 992px) {
	ul.lsaf-products[class*="lsaf-columns-"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	ul.lsaf-products[class*="lsaf-columns-"] {
		grid-template-columns: repeat(2, 1fr);
	}
	.lsaf-filter-btn { padding: 10px 14px; }
	.lsaf-filter-btn .lsaf-icon { width: 28px; height: 28px; }
}

/* ==========================================================================
   MODE GALERIE — tuiles carrées de marques + vue résultats + bouton retour
   ========================================================================== */

/* Grille de tuiles carrées */
.lsaf-brands-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
}

.lsaf-brand-cols-1 { grid-template-columns: repeat(1, 1fr); }
.lsaf-brand-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lsaf-brand-cols-3 { grid-template-columns: repeat(3, 1fr); }
.lsaf-brand-cols-4 { grid-template-columns: repeat(4, 1fr); }
.lsaf-brand-cols-5 { grid-template-columns: repeat(5, 1fr); }
.lsaf-brand-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* La tuile est un <button> (tap fiable sur mobile). On neutralise tout le
   style de bouton du thème (fond noir, bordure, ombre...) avec un sélecteur
   spécifique + !important pour être sûr de gagner sur les règles du thème. */
.lsaf-brands-gallery button.lsaf-tile,
.lsaf-wrapper button.lsaf-tile {
	display: block;
	width: 100%;
	text-align: center;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	line-height: normal;
	color: inherit;
	font: inherit;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.lsaf-brands-gallery button.lsaf-tile::before,
.lsaf-brands-gallery button.lsaf-tile::after {
	display: none !important;
	content: none !important;
}

.lsaf-tile:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Le carré 1:1 qui contient l'image de la marque */
.lsaf-tile-img {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(128, 128, 128, 0.08);
	/* isolation : garde le fondu (mix-blend-mode) contenu DANS la tuile,
	   pour qu'il se mélange avec le fond de la tuile et non avec la page. */
	isolation: isolate;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Carré 1:1 fiable sur TOUS les navigateurs (y compris Safari mobile).
   Le pseudo-élément impose la hauteur = largeur, ce que aspect-ratio ne
   garantit pas toujours à l'intérieur d'une grille sur Safari. */
.lsaf-tile-img::before {
	content: "";
	display: block;
	padding-top: 100%;
}

/* Fonds par défaut quand on efface un fond noir/blanc.
   -> "screen" (fond noir à effacer) a besoin d'un fond CLAIR : blanc par défaut.
   -> "multiply" (fond blanc à effacer) a besoin d'un fond FONCÉ : noir par défaut.
   Le réglage Elementor "Fond de la tuile" reste prioritaire et surcharge ceci. */
.lsaf-brands-gallery[data-blend="screen"] .lsaf-tile-img {
	background: #ffffff;
}
.lsaf-brands-gallery[data-blend="multiply"] .lsaf-tile-img {
	background: #000000;
}

.lsaf-tile:hover .lsaf-tile-img {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.lsaf-tile-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* object-fit défini inline (cover/contain) selon le réglage */
}

/* En "contain", l'image entière tient dans le carré. Pas de marge imposée
   par défaut ; utilise le réglage "Marge intérieure de l'image" si tu veux
   aérer le logo. */

.lsaf-tile-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
	padding: 10px;
	text-align: center;
}

.lsaf-tile-name {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* En-tête de la vue résultats (bouton retour + nom de la marque) */
.lsaf-results-head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 30px;
	flex-wrap: wrap;
}

.lsaf-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 100px;
	padding: 10px 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.lsaf-back-btn:hover {
	border-color: currentColor;
	background-color: rgba(128, 128, 128, 0.08);
}

.lsaf-current-brand {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* La vue résultats masquée via l'attribut [hidden] natif */
.lsaf-results[hidden],
.lsaf-brands-gallery[hidden] {
	display: none;
}

@media (max-width: 992px) {
	.lsaf-brands-gallery { grid-template-columns: repeat(3, 1fr); }
	.lsaf-brand-cols-1,
	.lsaf-brand-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.lsaf-brands-gallery,
	.lsaf-brand-cols-3,
	.lsaf-brand-cols-4,
	.lsaf-brand-cols-5,
	.lsaf-brand-cols-6 { grid-template-columns: repeat(2, 1fr); }
	.lsaf-results-head { gap: 12px; }
	.lsaf-current-brand { font-size: 17px; }
}

/* ==========================================================================
   MOBILE — produits par ligne
   La largeur des produits sur mobile est imposée par le CSS critique injecté
   directement dans le HTML du widget (voir le shortcode), avec une spécificité
   supérieure aux classes col-xs-* du thème et à l'abri de WP Rocket.
   On garde ici uniquement la grille du mode autonome (thème non-Liquid).
   ========================================================================== */
@media (max-width: 767px) {
	ul.lsaf-products[class*="lsaf-columns-"] {
		grid-template-columns: repeat(2, 1fr);
	}
}