/* mrz-display-post-exp — layout minimal (à personnaliser via le thème) */
.mrz-display-post-exp-wrapper { display: block; }

/* Filtres latéraux gauche / droite */
.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-left,
.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-right { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-right { grid-template-columns: 1fr 260px; }
.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-right .mrz-display-post-exp-filters { grid-column: 2; grid-row: 1; }
.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-right .mrz-display-post-exp-main { grid-column: 1; grid-row: 1; }

/* Filtres au-dessus */
.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-above .mrz-display-post-exp-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.mrz-display-post-exp-filters .mrz-display-post-exp-filter { display: flex; flex-direction: column; gap: 4px; }
.mrz-display-post-exp-filter-label { font-weight: 600; }
.mrz-display-post-exp-filter-group { display: flex; flex-direction: column; gap: 2px; }

.mrz-display-post-exp-main { display: block; }
.mrz-display-post-exp-data { display: none; }

/* --- Format LISTE --- */
.mrz-display-post-exp-fmt-list .mrz-display-post-exp-list { display: flex; flex-direction: column; gap: 8px; }

/* --- Format GRILLE --- */
.mrz-display-post-exp-fmt-grid .mrz-display-post-exp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mrz-grid-min, 240px), 1fr)); gap: var(--mrz-grid-gap, 12px); }

/* Ratio uniforme de l'image à la une ({post_thumbnail}) — recadrage CSS, sans tronquer le fichier. */
.mrz-display-post-exp-has-thumb-ratio img.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mrz-img-ratio);
	object-fit: cover;
}

/* Item — aucune propriété cursor : le thème/site gère le curseur. */
a.mrz-display-post-exp-item-wrap { display: block; color: inherit; text-decoration: none; }
.mrz-display-post-exp-list-wrap { display: flex; flex-direction: column; gap: 10px; }

/* Pagination (liste / grille) */
.mrz-display-post-exp-pagination { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 8px 0; }
/* L'attribut hidden doit l'emporter sur le display:flex ci-dessus (une seule page, slider, etc.). */
.mrz-display-post-exp-pagination[hidden] { display: none; }
.mrz-display-post-exp-pagination button[disabled] { opacity: 0.4; }

/* --- Format SLIDER (scroll-snap natif) --- */
.mrz-display-post-exp-slider { position: relative; }
.mrz-display-post-exp-track {
	display: flex;
	gap: var(--mrz-gap, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mrz-display-post-exp-track::-webkit-scrollbar { display: none; }
.mrz-display-post-exp-track > * {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--mrz-per-view, 1) - 1) * var(--mrz-gap, 16px)) / var(--mrz-per-view, 1));
	box-sizing: border-box;
}
.mrz-display-post-exp-slider-prev,
.mrz-display-post-exp-slider-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	border: 1px solid #dcdcde;
	background: #fff;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
}
.mrz-display-post-exp-slider-prev { left: 4px; }
.mrz-display-post-exp-slider-next { right: 4px; }
.mrz-display-post-exp-slider-prev[disabled],
.mrz-display-post-exp-slider-next[disabled] { opacity: 0.35; }
.mrz-display-post-exp-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.mrz-display-post-exp-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
}
.mrz-display-post-exp-dots button[aria-current="true"] { opacity: 1; }

/* Variante : flèches au-dessus du slider, alignées à gauche (track en dessous). */
.mrz-display-post-exp-slider.is-arrows-top { display: flex; flex-wrap: wrap; align-items: center; }
.mrz-display-post-exp-slider.is-arrows-top .mrz-display-post-exp-slider-prev,
.mrz-display-post-exp-slider.is-arrows-top .mrz-display-post-exp-slider-next {
	position: static;
	transform: none;
	top: auto;
	left: auto;
	right: auto;
	margin: 0 6px 10px 0;
}
.mrz-display-post-exp-slider.is-arrows-top .mrz-display-post-exp-slider-prev { order: 1; }
.mrz-display-post-exp-slider.is-arrows-top .mrz-display-post-exp-slider-next { order: 2; }
.mrz-display-post-exp-slider.is-arrows-top .mrz-display-post-exp-track { order: 3; flex: 0 0 100%; }
.mrz-display-post-exp-slider.is-arrows-top .mrz-display-post-exp-dots { order: 4; flex: 0 0 100%; }

/* Recherche : champ détaché en haut, pleine largeur (search_layout = top) */
.mrz-display-post-exp-search-top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-left,
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-right {
	grid-template-rows: auto 1fr;
}
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-left .mrz-display-post-exp-search-top,
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-right .mrz-display-post-exp-search-top {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: 0;
}
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-left .mrz-display-post-exp-filters { grid-column: 1; grid-row: 2; }
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-left .mrz-display-post-exp-main { grid-column: 2; grid-row: 2; }
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-right .mrz-display-post-exp-filters { grid-column: 2; grid-row: 2; }
.mrz-display-post-exp-wrapper.mrz-display-post-exp-has-search-top.mrz-display-post-exp-filters-side-right .mrz-display-post-exp-main { grid-column: 1; grid-row: 2; }

.mrz-display-post-exp-search-wrapper { position: relative; }
.mrz-display-post-exp-search { width: 100%; box-sizing: border-box; }

/* Aucun résultat */
.mrz-display-post-exp-empty { padding: 16px 0; color: #666; }

/* Bouton toggle des filtres : masqué sur desktop, visible sur mobile. */
.mrz-display-post-exp-filters-toggle { display: none; }

/* Responsive : tablette et mobile — empilement forcé filtres → contenu */
@media (max-width: 1024px) {
	.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-left,
	.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-right { display: block; }
	.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-right .mrz-display-post-exp-filters,
	.mrz-display-post-exp-wrapper.mrz-display-post-exp-filters-side-right .mrz-display-post-exp-main {
		grid-column: auto;
		grid-row: auto;
	}
	.mrz-display-post-exp-wrapper .mrz-display-post-exp-filters { margin-bottom: 12px; }
}

/* Mobile strict : repli des filtres derrière un toggle, sauf le champ recherche. */
@media (max-width: 768px) {
	.mrz-display-post-exp-filters-toggle {
		display: block;
		width: 100%;
		padding: 10px 14px;
		margin-top: 8px;
		text-align: left;
		background: #f0f0f1;
		border: 1px solid #dcdcde;
		border-radius: 4px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.mrz-display-post-exp-filters-toggle::after {
		content: '▾';
		float: right;
		transition: transform 0.2s ease;
	}
	.mrz-display-post-exp-filters-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
	.mrz-display-post-exp-filters .mrz-display-post-exp-filters-body { display: none; margin-top: 8px; }
	.mrz-display-post-exp-filters.is-open .mrz-display-post-exp-filters-body { display: flex; flex-direction: column; gap: 12px; }
}
