/**
 * Listing Grid — styles de base.
 *
 * Toutes les valeurs pilotables par l'éditeur passent par des variables CSS
 * définies sur `.lb-listing-grid` : une seule règle couvre 1 à 12 colonnes et
 * tous les points de rupture, et le HTML injecté en AJAX hérite des styles
 * sans recalcul.
 */

.lb-listing-grid {
	--lb-columns: 3;
	--lb-column-min: 260px;
	--lb-column-gap: 24px;
	--lb-row-gap: 24px;
	--lb-scroll-item-width: 300px;

	position: relative;
}

.lb-grid {
	display: grid;
	grid-template-columns: repeat(var(--lb-columns), minmax(0, 1fr));
	column-gap: var(--lb-column-gap);
	row-gap: var(--lb-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-grid__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition-property: transform, box-shadow, background-color, border-color;
	transition-timing-function: ease;
}

.lb-grid__item > .lb-item__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.lb-listing-grid--equal-height .lb-grid__item > * {
	flex: 1;
}

.lb-grid__item--injected {
	grid-column: span var(--lb-item-span, 1);
}

@media (max-width: 767px) {
	.lb-grid__item--injected {
		grid-column: auto;
	}
}

/* Colonnes automatiques : la grille décide du nombre de colonnes selon la
   largeur disponible, sans point de rupture à maintenir. */
.lb-listing-grid--auto-columns .lb-grid {
	grid-template-columns: repeat(auto-fill, minmax(var(--lb-column-min), 1fr));
}

/* --- Maçonnerie --------------------------------------------------------- */

.lb-listing-grid--masonry-native .lb-grid {
	grid-template-rows: masonry;
	align-tracks: start;
}

.lb-listing-grid--masonry-js .lb-grid {
	align-items: start;
}

.lb-listing-grid--masonry-js .lb-grid__item {
	align-self: start;
}

/* --- Défilement horizontal ---------------------------------------------- */

.lb-listing-grid--scroll .lb-grid {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.lb-listing-grid--scroll .lb-grid__item {
	flex: 0 0 var(--lb-scroll-item-width);
	scroll-snap-align: start;
}

/* --- Carrousel ----------------------------------------------------------- */

.lb-listing-grid--carousel {
	overflow: hidden;
}

.lb-carousel__track {
	display: flex;
	column-gap: var(--lb-column-gap);
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.lb-carousel__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.lb-listing-grid--carousel .lb-grid__item {
	flex: 0 0 calc((100% - (var(--lb-columns) - 1) * var(--lb-column-gap)) / var(--lb-columns));
}

.lb-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.55);
	border: 0;
	border-radius: 50%;
	color: #fff;
	transform: translateY(-50%);
}

.lb-carousel__arrow--prev {
	left: 8px;
}

.lb-carousel__arrow--next {
	right: 8px;
}

.lb-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.lb-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	cursor: pointer;
	background: currentColor;
	border: 0;
	border-radius: 50%;
	opacity: 0.35;
}

.lb-carousel__dot[aria-current='true'] {
	opacity: 1;
}

/* --- Chargement différé --------------------------------------------------- */

.lb-listing-grid--lazy .lb-grid__item {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.lb-listing-grid--lazy .lb-grid__item.is-revealed {
	opacity: 1;
	transform: none;
}

/* --- État de chargement --------------------------------------------------- */

.lb-listing-grid--loading .lb-grid {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.lb-skeleton {
	display: grid;
	grid-template-columns: repeat(var(--lb-columns), minmax(0, 1fr));
	column-gap: var(--lb-column-gap);
	row-gap: var(--lb-row-gap);
	margin-top: var(--lb-row-gap);
}

.lb-skeleton__cell {
	min-height: 160px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.06) 63%);
	background-size: 400% 100%;
	border-radius: 6px;
	animation: lb-skeleton-shimmer 1.4s ease infinite;
}

@keyframes lb-skeleton-shimmer {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

/* --- Pagination ----------------------------------------------------------- */

.lb-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-pagination a,
.lb-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	padding: 0.5em 0.75em;
	text-decoration: none;
}

.lb-load-more-wrap {
	display: flex;
	justify-content: center;
}

.lb-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75em 1.5em;
	cursor: pointer;
	text-decoration: none;
}

.lb-infinite {
	min-height: 1px;
	text-align: center;
}

.lb-not-found {
	padding: 2em 0;
	text-align: center;
}

.lb-placeholder,
.lb-admin-notice {
	padding: 1em;
	font-size: 14px;
	background: #fff8e5;
	border: 1px dashed #d6b656;
	border-radius: 4px;
}

.lb-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Préférences d'accessibilité ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.lb-grid__item,
	.lb-carousel__track,
	.lb-listing-grid--lazy .lb-grid__item {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.lb-skeleton__cell {
		animation: none;
	}
}

/* --- Widgets dynamiques ---------------------------------------------------- */

.lb-dynamic-image {
	margin: 0;
}

.lb-dynamic-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.lb-dynamic-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}

.lb-dynamic-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.lb-dynamic-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.lb-dynamic-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.lb-dynamic-terms__term {
	display: inline-flex;
	text-decoration: none;
}

.lb-repeater {
	display: grid;
	grid-template-columns: repeat(var(--lb-columns, 1), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-repeater__field {
	display: block;
}

/* --- Filtres & tri --------------------------------------------------------- */

.lb-filter__fields {
	display: grid;
	grid-template-columns: repeat(var(--lb-filter-columns, 3), minmax(0, 1fr));
	gap: 16px;
}

.lb-filter__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.lb-filter__label {
	font-size: 0.875em;
	font-weight: 600;
}

.lb-filter__input,
.lb-filter__select,
.lb-sort__select {
	width: 100%;
	padding: 0.5em 0.75em;
}

.lb-filter__checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.lb-filter__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lb-filter__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.lb-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 767px) {
	.lb-filter__fields {
		grid-template-columns: 1fr;
	}
}

/* --- Diagnostic (?lb_debug=1, réservé aux éditeurs) ------------------------ */

.lb-debug {
	margin-top: 24px;
	padding: 12px 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

.lb-debug__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 12px 0;
}

.lb-debug__list dt {
	font-weight: 600;
}

.lb-debug__list dd {
	margin: 0;
}

.lb-debug__args {
	max-height: 320px;
	margin: 0;
	overflow: auto;
	white-space: pre-wrap;
}

/* --- Effets combinables --------------------------------------------------- */

/* La maçonnerie est un effet, pas une disposition : elle se superpose à la
   grille comme à la liste. Le JavaScript n'intervient que si le navigateur ne
   sait pas faire `grid-template-rows: masonry`. */
.lb-listing-grid--masonry.lb-listing-grid--masonry-native .lb-grid {
	grid-template-rows: masonry;
	align-tracks: start;
}

.lb-listing-grid--masonry.lb-listing-grid--masonry-js .lb-grid,
.lb-listing-grid--masonry.lb-listing-grid--masonry-js .lb-grid__item {
	align-items: start;
	align-self: start;
}

.lb-listing-grid--stretch .lb-grid__item > *,
.lb-listing-grid--stretch .lb-grid__item > .lb-item__link > * {
	flex: 1;
}

/* Dernière rangée étirée : les items isolés occupent la largeur restante
   plutôt que de laisser un vide à droite. */
.lb-listing-grid--stretch-last .lb-grid {
	grid-template-columns: repeat(auto-fit, minmax(calc((100% - (var(--lb-columns) - 1) * var(--lb-column-gap)) / var(--lb-columns)), 1fr));
}

/* `span` attend un entier littéral : une fonction `min()` y est invalide et
   silencieusement ignorée. La variable, elle, se substitue en un vrai entier.
   Le nombre de colonnes occupées est donc borné par point de rupture, et la
   mise en avant est neutralisée sur mobile, où la grille n'a qu'une colonne. */
.lb-listing-grid--featured-first .lb-grid__item:first-child {
	grid-column: span var(--lb-first-span, 2);
}

@media (max-width: 767px) {
	.lb-listing-grid--featured-first .lb-grid__item:first-child {
		grid-column: auto;
	}
}

.lb-listing-grid--dividers .lb-grid__item {
	position: relative;
}

.lb-listing-grid--dividers .lb-grid__item::after {
	position: absolute;
	inset-inline-start: calc(var(--lb-column-gap) / -2);
	inset-block: 0;
	width: var(--lb-divider-width, 1px);
	background: var(--lb-divider-color, rgba(0, 0, 0, 0.12));
	content: '';
}

.lb-listing-grid--dividers .lb-grid__item:first-child::after {
	content: none;
}

@media (max-width: 767px) {
	.lb-listing-grid--reverse-mobile .lb-grid {
		flex-direction: column-reverse;
		display: flex;
	}
}

/* --- Disposition en liste -------------------------------------------------- */

/*
 * Un Listing Item rendu par Elementor n'expose pas ses widgets comme enfants
 * directs de la cellule : ils sont imbriqués dans le conteneur du document
 * (`.e-con` / `.e-con-inner`, ou l'ancienne structure section/colonne). Viser
 * `.lb-grid__item > :first-child` ne toucherait donc que l'emballage.
 *
 * On pilote plutôt le conteneur Elementor par ses propres variables — c'est
 * l'interface documentée et stable — puis on désigne le premier widget comme
 * média de la ligne.
 */

.lb-listing-grid--list {
	--lb-list-media-position: left;
	--lb-list-media-width: 35%;
	--lb-list-media-gap: 20px;
	--lb-columns: 1;
}

.lb-listing-grid--list .lb-grid__item > .lb-item__link {
	display: block;
	width: 100%;
}

/* Conteneurs Elementor : on impose la direction et l'espacement de la ligne. */
.lb-listing-grid--list .lb-grid__item .e-con,
.lb-listing-grid--list .lb-grid__item .elementor-container {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
	--gap: var(--lb-list-media-gap);

	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--lb-list-media-gap);
}

.lb-listing-grid--list .lb-grid__item .e-con-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--lb-list-media-gap);
	width: 100%;
}

/* Le premier widget du gabarit tient lieu de média de la ligne. */
.lb-listing-grid--list .lb-grid__item .e-con-inner > .elementor-element:first-child,
.lb-listing-grid--list .lb-grid__item > .lb-item__link > .elementor > .e-con > .elementor-element:first-child,
.lb-listing-grid--list .lb-grid__item .elementor-container > .elementor-column:first-child {
	flex: 0 0 var(--lb-list-media-width);
	max-width: var(--lb-list-media-width);
	min-width: 0;
}

/* Tout le reste forme la colonne de contenu et se replie verticalement. */
.lb-listing-grid--list .lb-grid__item .e-con-inner > .elementor-element:not(:first-child),
.lb-listing-grid--list .lb-grid__item .elementor-container > .elementor-column:not(:first-child) {
	flex: 1 1 auto;
	min-width: 0;
}

/* Média à droite : la ligne est simplement inversée. */
.lb-listing-grid--media-right .lb-grid__item .e-con,
.lb-listing-grid--media-right .lb-grid__item .e-con-inner,
.lb-listing-grid--media-right .lb-grid__item .elementor-container {
	--flex-direction: row-reverse;

	flex-direction: row-reverse;
}

/* Média au-dessus : on revient à une colonne, le média reprend la largeur. */
.lb-listing-grid--media-top .lb-grid__item .e-con,
.lb-listing-grid--media-top .lb-grid__item .e-con-inner,
.lb-listing-grid--media-top .lb-grid__item .elementor-container {
	--flex-direction: column;

	flex-direction: column;
}

.lb-listing-grid--media-top .lb-grid__item .e-con-inner > .elementor-element:first-child,
.lb-listing-grid--media-top .lb-grid__item .elementor-container > .elementor-column:first-child {
	flex-basis: auto;
	max-width: 100%;
}

.lb-listing-grid--alternate.lb-listing-grid--media-left .lb-grid__item:nth-child(even) .e-con,
.lb-listing-grid--alternate.lb-listing-grid--media-left .lb-grid__item:nth-child(even) .e-con-inner,
.lb-listing-grid--alternate.lb-listing-grid--media-left .lb-grid__item:nth-child(even) .elementor-container {
	--flex-direction: row-reverse;

	flex-direction: row-reverse;
}

.lb-listing-grid--alternate.lb-listing-grid--media-right .lb-grid__item:nth-child(even) .e-con,
.lb-listing-grid--alternate.lb-listing-grid--media-right .lb-grid__item:nth-child(even) .e-con-inner,
.lb-listing-grid--alternate.lb-listing-grid--media-right .lb-grid__item:nth-child(even) .elementor-container {
	--flex-direction: row;

	flex-direction: row;
}

@media (max-width: 767px) {
	.lb-listing-grid--list .lb-grid__item .e-con,
	.lb-listing-grid--list .lb-grid__item .e-con-inner,
	.lb-listing-grid--list .lb-grid__item .elementor-container,
	.lb-listing-grid--alternate .lb-grid__item:nth-child(even) .e-con,
	.lb-listing-grid--alternate .lb-grid__item:nth-child(even) .e-con-inner,
	.lb-listing-grid--alternate .lb-grid__item:nth-child(even) .elementor-container,
	.lb-listing-grid--media-right .lb-grid__item .e-con,
	.lb-listing-grid--media-right .lb-grid__item .e-con-inner {
		--flex-direction: column;

		flex-direction: column;
	}

	.lb-listing-grid--list .lb-grid__item .e-con-inner > .elementor-element:first-child,
	.lb-listing-grid--list .lb-grid__item .elementor-container > .elementor-column:first-child {
		flex-basis: auto;
		max-width: 100%;
	}
}

/* --- Tableau --------------------------------------------------------------- */

.lb-listing-grid--table {
	--lb-table-border: #E0E0E0;
}

.lb-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lb-table__scroll:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lb-table {
	width: 100%;
	border-collapse: collapse;
	text-align: start;
}

.lb-table th,
.lb-table td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--lb-table-border);
	vertical-align: top;
}

.lb-table thead th {
	background: #FAFAFA;
	font-weight: 600;
	text-align: inherit;
	white-space: nowrap;
}

.lb-table tbody th {
	font-weight: 600;
	text-align: start;
}

.lb-table__sort {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	text-decoration: none;
}

.lb-table__sort-icon::before {
	content: '↕';
	opacity: 0.4;
}

.lb-table th[aria-sort='ascending'] .lb-table__sort-icon::before {
	content: '↑';
	opacity: 1;
}

.lb-table th[aria-sort='descending'] .lb-table__sort-icon::before {
	content: '↓';
	opacity: 1;
}

/* --- Compteur, pagination détachée, sélecteur ------------------------------ */

.lb-results-count {
	margin: 0 0 1em;
}

.lb-detached-pagination .lb-pagination,
.lb-detached-pagination .lb-load-more-wrap {
	margin-top: 0;
}

.lb-switcher {
	display: flex;
	gap: 8px;
}

.lb-switcher__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.9em;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	cursor: pointer;
	font: inherit;
}

.lb-switcher__button[aria-pressed='true'] {
	background: currentColor;
}

.lb-switcher__button[aria-pressed='true'] .lb-switcher__label {
	color: #fff;
	mix-blend-mode: difference;
}

/* --- Carrousel : commandes et états ---------------------------------------- */

.lb-carousel__arrow[disabled] {
	cursor: default;
	opacity: 0.35;
}

.lb-carousel--draggable .lb-carousel__track {
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.lb-carousel--draggable .lb-carousel__track.is-dragging,
.lb-carousel.is-dragging .lb-carousel__track {
	cursor: grabbing;
}

/* Le mode centré laisse dépasser les vues voisines de part et d'autre. */
.lb-carousel--center {
	overflow: visible;
}

.lb-carousel--center .lb-grid__item {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.lb-carousel--center .lb-grid__item:not(.is-active) {
	opacity: 0.45;
}

.lb-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.lb-carousel__controls .lb-carousel__dots {
	margin-top: 0;
}

.lb-carousel__playpause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 12px;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
}

.lb-carousel__playpause:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Une copie de bouclage ne doit jamais être atteignable au clavier. */
.lb-carousel__clone {
	pointer-events: none;
}

.lb-carousel--draggable .lb-carousel__clone {
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.lb-carousel--center .lb-grid__item {
		transition: none;
	}
}