/**
 * Styles front-end — Divi Loop Filter Pro
 *
 * Méthodologie BEM, préfixe .dlf-
 * Variables CSS --dlf-* pour theming Divi.
 * Mobile-first, responsive.
 *
 * @since 1.0.0
 */

/* ///////////////////////////
   //// VARIABLES CSS
   /////////////////////////// */

:root {
	--dlf-couleur-primaire: #2563eb;
	--dlf-couleur-primaire-hover: #1d4ed8;
	--dlf-couleur-primaire-light: #dbeafe;
	--dlf-couleur-texte: #1f2937;
	--dlf-couleur-texte-secondaire: #6b7280;
	--dlf-couleur-fond: #ffffff;
	--dlf-couleur-fond-secondaire: #f9fafb;
	--dlf-couleur-bordure: #e5e7eb;
	--dlf-couleur-bordure-active: #2563eb;
	--dlf-couleur-erreur: #dc2626;
	--dlf-radius: 6px;
	--dlf-radius-pill: 9999px;
	--dlf-transition: 200ms ease;
	--dlf-espace-xs: 4px;
	--dlf-espace-sm: 8px;
	--dlf-espace-md: 12px;
	--dlf-espace-lg: 16px;
	--dlf-espace-xl: 24px;
	--dlf-font-size-sm: 0.8125rem;
	--dlf-font-size-base: 0.875rem;
	--dlf-font-size-lg: 1rem;
}

/* ///////////////////////////
   //// FILTRAGE SHOW/HIDE (ne casse pas le layout Divi)
   /////////////////////////// */

.dlf-hidden {
	display: none !important;
}

/* ///////////////////////////
   //// UTILITAIRES
   /////////////////////////// */

.dlf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dlf-fade-out {
	opacity: 0;
	transition: opacity var(--dlf-transition);
}

.dlf-fade-in {
	opacity: 1;
	transition: opacity var(--dlf-transition);
}

/* ///////////////////////////
   //// MODULE WRAPPER
   /////////////////////////// */

.dlf-module {
	font-family: inherit;
	font-size: var(--dlf-font-size-base);
	color: var(--dlf-couleur-texte);
	line-height: 1.5;
}

/* ///////////////////////////
   //// PANNEAU DE FILTRES
   /////////////////////////// */

.dlf-panneau {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dlf-espace-lg);
	align-items: flex-start;
	padding: var(--dlf-espace-lg);
	background: var(--dlf-couleur-fond);
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius);
}

.dlf-panneau--vertical {
	flex-direction: column;
}

.dlf-panneau--horizontal {
	flex-direction: row;
}

.dlf-panneau--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dlf-panneau__section {
	flex: 1 1 auto;
	min-width: 0;
}

.dlf-panneau__section--actions {
	display: flex;
	align-items: center;
	gap: var(--dlf-espace-md);
	flex-wrap: wrap;
}

/* ///////////////////////////
   //// CHAMP DE RECHERCHE
   /////////////////////////// */

.dlf-recherche {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.dlf-recherche__icone {
	position: absolute;
	left: var(--dlf-espace-md);
	top: 50%;
	transform: translateY(-50%);
	color: var(--dlf-couleur-texte-secondaire);
	pointer-events: none;
	display: flex;
	align-items: center;
}

.dlf-recherche__input {
	width: 100%;
	padding: var(--dlf-espace-sm) var(--dlf-espace-xl) var(--dlf-espace-sm) 40px;
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius);
	font-size: var(--dlf-font-size-base);
	color: var(--dlf-couleur-texte);
	background: var(--dlf-couleur-fond);
	transition: border-color var(--dlf-transition), box-shadow var(--dlf-transition);
	outline: none;
}

.dlf-recherche__input:focus {
	border-color: var(--dlf-couleur-primaire);
	box-shadow: 0 0 0 3px var(--dlf-couleur-primaire-light);
}

.dlf-recherche__input::placeholder {
	color: var(--dlf-couleur-texte-secondaire);
}

.dlf-recherche__effacer {
	position: absolute;
	right: var(--dlf-espace-sm);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--dlf-couleur-texte-secondaire);
	padding: var(--dlf-espace-xs);
	display: flex;
	align-items: center;
	border-radius: 50%;
	transition: background var(--dlf-transition);
}

.dlf-recherche__effacer:hover {
	background: var(--dlf-couleur-fond-secondaire);
	color: var(--dlf-couleur-texte);
}

/* ///////////////////////////
   //// FILTRES (GENERIQUE)
   /////////////////////////// */

.dlf-filtre {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.dlf-filtre__titre {
	font-size: var(--dlf-font-size-sm);
	font-weight: 600;
	color: var(--dlf-couleur-texte);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--dlf-espace-sm);
	display: block;
}

.dlf-filtre__liste {
	display: flex;
	flex-direction: column;
	gap: var(--dlf-espace-xs);
}

.dlf-filtre__label {
	display: flex;
	align-items: center;
	gap: var(--dlf-espace-sm);
	cursor: pointer;
	padding: var(--dlf-espace-xs) 0;
	font-size: var(--dlf-font-size-base);
	transition: color var(--dlf-transition);
}

.dlf-filtre__label:hover {
	color: var(--dlf-couleur-primaire);
}

.dlf-filtre__input {
	accent-color: var(--dlf-couleur-primaire);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.dlf-filtre__texte {
	flex: 1;
}

.dlf-filtre__select {
	width: 100%;
	padding: var(--dlf-espace-sm) var(--dlf-espace-md);
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius);
	font-size: var(--dlf-font-size-base);
	color: var(--dlf-couleur-texte);
	background: var(--dlf-couleur-fond);
	cursor: pointer;
	outline: none;
	transition: border-color var(--dlf-transition);
}

.dlf-filtre__select:focus {
	border-color: var(--dlf-couleur-primaire);
	box-shadow: 0 0 0 3px var(--dlf-couleur-primaire-light);
}

/* ///////////////////////////
   //// BOUTONS FILTRES (tags)
   /////////////////////////// */

.dlf-filtre__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dlf-espace-sm);
}

.dlf-filtre__bouton {
	display: inline-flex;
	align-items: center;
	gap: var(--dlf-espace-xs);
	padding: var(--dlf-espace-xs) var(--dlf-espace-md);
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius-pill);
	background: var(--dlf-couleur-fond);
	color: var(--dlf-couleur-texte);
	font-size: var(--dlf-font-size-sm);
	cursor: pointer;
	transition: all var(--dlf-transition);
	white-space: nowrap;
}

.dlf-filtre__bouton:hover {
	border-color: var(--dlf-couleur-primaire);
	color: var(--dlf-couleur-primaire);
}

.dlf-filtre__bouton--actif,
.dlf-filtre__bouton[aria-pressed="true"] {
	background: var(--dlf-couleur-primaire);
	border-color: var(--dlf-couleur-primaire);
	color: #ffffff;
}

/* ///////////////////////////
   //// COMPTEURS
   /////////////////////////// */

.dlf-compteur {
	font-size: var(--dlf-font-size-sm);
	color: var(--dlf-couleur-texte-secondaire);
	font-weight: 400;
}

.dlf-filtre__bouton--actif .dlf-compteur {
	color: rgba(255, 255, 255, 0.8);
}

.dlf-compteur-total {
	font-size: var(--dlf-font-size-base);
	color: var(--dlf-couleur-texte-secondaire);
	font-weight: 500;
}

/* ///////////////////////////
   //// RANGE SLIDER
   /////////////////////////// */

.dlf-range {
	display: flex;
	gap: var(--dlf-espace-sm);
	align-items: center;
}

.dlf-range__input {
	flex: 1;
	accent-color: var(--dlf-couleur-primaire);
	cursor: pointer;
}

.dlf-range__valeurs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--dlf-espace-sm);
	font-size: var(--dlf-font-size-sm);
	color: var(--dlf-couleur-texte-secondaire);
	margin-top: var(--dlf-espace-xs);
}

.dlf-range__separateur {
	color: var(--dlf-couleur-bordure);
}

/* ///////////////////////////
   //// OPTIONS DE TRI
   /////////////////////////// */

.dlf-panneau__section--tri {
	display: flex;
	align-items: center;
	gap: var(--dlf-espace-sm);
}

.dlf-tri__label {
	font-size: var(--dlf-font-size-sm);
	font-weight: 600;
	color: var(--dlf-couleur-texte-secondaire);
	white-space: nowrap;
}

.dlf-tri__select {
	padding: var(--dlf-espace-sm) var(--dlf-espace-md);
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius);
	font-size: var(--dlf-font-size-base);
	color: var(--dlf-couleur-texte);
	background: var(--dlf-couleur-fond);
	cursor: pointer;
	outline: none;
	transition: border-color var(--dlf-transition);
	min-width: 180px;
}

.dlf-tri__select:focus {
	border-color: var(--dlf-couleur-primaire);
	box-shadow: 0 0 0 3px var(--dlf-couleur-primaire-light);
}

.dlf-tri__boutons {
	display: flex;
	gap: var(--dlf-espace-xs);
}

.dlf-tri__bouton {
	display: inline-flex;
	align-items: center;
	gap: var(--dlf-espace-xs);
	padding: var(--dlf-espace-xs) var(--dlf-espace-sm);
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius);
	background: var(--dlf-couleur-fond);
	color: var(--dlf-couleur-texte-secondaire);
	font-size: var(--dlf-font-size-sm);
	cursor: pointer;
	transition: all var(--dlf-transition);
}

.dlf-tri__bouton:hover {
	border-color: var(--dlf-couleur-primaire);
}

.dlf-tri__bouton--actif {
	border-color: var(--dlf-couleur-primaire);
	color: var(--dlf-couleur-primaire);
	font-weight: 600;
}

.dlf-tri__direction {
	font-size: 0.75rem;
}

/* ///////////////////////////
   //// BOUTON RESET
   /////////////////////////// */

.dlf-bouton-reset {
	padding: var(--dlf-espace-xs) var(--dlf-espace-md);
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius);
	background: var(--dlf-couleur-fond);
	color: var(--dlf-couleur-texte-secondaire);
	font-size: var(--dlf-font-size-sm);
	cursor: pointer;
	transition: all var(--dlf-transition);
}

.dlf-bouton-reset:hover {
	border-color: var(--dlf-couleur-erreur);
	color: var(--dlf-couleur-erreur);
}

/* ///////////////////////////
   //// CHARGEMENT
   /////////////////////////// */

.dlf-resultats-status {
	position: relative;
	min-height: 0;
	pointer-events: none;
}

.dlf-chargement {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--dlf-espace-md);
	min-height: 40px;
}

.dlf-chargement[hidden] {
	display: none !important;
}

.dlf-chargement__texte {
	color: var(--dlf-couleur-texte-secondaire);
	font-size: var(--dlf-font-size-base);
}

/* Spinner */
.dlf-spinner {
	display: flex;
	justify-content: center;
}

.dlf-spinner__cercle {
	width: 32px;
	height: 32px;
	border: 3px solid var(--dlf-couleur-bordure);
	border-top-color: var(--dlf-couleur-primaire);
	border-radius: 50%;
	animation: dlf-spin 0.7s linear infinite;
}

@keyframes dlf-spin {
	to { transform: rotate(360deg); }
}

/* Skeleton */
.dlf-skeleton {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dlf-espace-lg);
	width: 100%;
}

.dlf-skeleton__item {
	height: 200px;
	border-radius: var(--dlf-radius);
	background: linear-gradient(90deg, var(--dlf-couleur-fond-secondaire) 25%, var(--dlf-couleur-bordure) 50%, var(--dlf-couleur-fond-secondaire) 75%);
	background-size: 200% 100%;
	animation: dlf-shimmer 1.5s infinite;
}

@keyframes dlf-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ///////////////////////////
   //// AUCUN RESULTAT
   /////////////////////////// */

.dlf-aucun-resultat {
	text-align: center;
	padding: var(--dlf-espace-xl);
	color: var(--dlf-couleur-texte-secondaire);
	font-size: var(--dlf-font-size-base);
}

/* ///////////////////////////
   //// ERREUR
   /////////////////////////// */

.dlf-erreur {
	text-align: center;
	padding: var(--dlf-espace-lg);
	color: var(--dlf-couleur-erreur);
	font-size: var(--dlf-font-size-base);
}

/* ///////////////////////////
   //// PAGINATION
   /////////////////////////// */

.dlf-pagination {
	display: flex;
	justify-content: center;
	padding: var(--dlf-espace-lg) 0;
}

.dlf-pagination__nav {
	display: flex;
	gap: var(--dlf-espace-xs);
	align-items: center;
}

.dlf-pagination__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--dlf-espace-sm);
	border: 1px solid var(--dlf-couleur-bordure);
	border-radius: var(--dlf-radius);
	background: var(--dlf-couleur-fond);
	color: var(--dlf-couleur-texte);
	font-size: var(--dlf-font-size-sm);
	cursor: pointer;
	transition: all var(--dlf-transition);
}

.dlf-pagination__bouton:hover {
	border-color: var(--dlf-couleur-primaire);
	color: var(--dlf-couleur-primaire);
}

.dlf-pagination__bouton--actif {
	background: var(--dlf-couleur-primaire);
	border-color: var(--dlf-couleur-primaire);
	color: #ffffff;
	font-weight: 600;
}

.dlf-pagination__ellipsis {
	color: var(--dlf-couleur-texte-secondaire);
	padding: 0 var(--dlf-espace-xs);
}

.dlf-pagination__loadmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--dlf-espace-sm) var(--dlf-espace-xl);
	border: 1px solid var(--dlf-couleur-primaire);
	border-radius: var(--dlf-radius);
	background: var(--dlf-couleur-fond);
	color: var(--dlf-couleur-primaire);
	font-size: var(--dlf-font-size-base);
	font-weight: 500;
	cursor: pointer;
	transition: all var(--dlf-transition);
}

.dlf-pagination__loadmore:hover {
	background: var(--dlf-couleur-primaire);
	color: #ffffff;
}

/* ///////////////////////////
   //// POST ITEM (RENDU FALLBACK)
   /////////////////////////// */

.dlf-post-item {
	display: flex;
	flex-direction: column;
	gap: var(--dlf-espace-sm);
}

.dlf-post-item__image {
	width: 100%;
	height: auto;
	border-radius: var(--dlf-radius);
	object-fit: cover;
}

.dlf-post-item__titre {
	font-size: var(--dlf-font-size-lg);
	font-weight: 600;
	margin: 0;
}

.dlf-post-item__titre a {
	color: var(--dlf-couleur-texte);
	text-decoration: none;
	transition: color var(--dlf-transition);
}

.dlf-post-item__titre a:hover {
	color: var(--dlf-couleur-primaire);
}

.dlf-post-item__extrait {
	font-size: var(--dlf-font-size-base);
	color: var(--dlf-couleur-texte-secondaire);
}

/* ///////////////////////////
   //// RESPONSIVE
   /////////////////////////// */

/* Tablette */
@media (max-width: 980px) {
	.dlf-panneau--horizontal {
		flex-direction: column;
	}

	.dlf-panneau--grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.dlf-skeleton {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile */
@media (max-width: 767px) {
	.dlf-panneau {
		padding: var(--dlf-espace-md);
		gap: var(--dlf-espace-md);
	}

	.dlf-panneau--grid {
		grid-template-columns: 1fr;
	}

	.dlf-panneau__section--tri {
		flex-direction: column;
		align-items: flex-start;
	}

	.dlf-filtre__boutons {
		gap: var(--dlf-espace-xs);
	}

	.dlf-tri__boutons {
		flex-wrap: wrap;
	}

	.dlf-skeleton {
		grid-template-columns: 1fr;
	}

	.dlf-pagination__bouton {
		min-width: 32px;
		height: 32px;
		font-size: 0.75rem;
	}
}

/* ///////////////////////////
   //// RTL
   /////////////////////////// */

[dir="rtl"] .dlf-recherche__icone {
	left: auto;
	right: var(--dlf-espace-md);
}

[dir="rtl"] .dlf-recherche__input {
	padding-left: var(--dlf-espace-xl);
	padding-right: 40px;
}

[dir="rtl"] .dlf-recherche__effacer {
	right: auto;
	left: var(--dlf-espace-sm);
}