/* Expériences : filtres, cartes, page individuelle. Volontairement neutre (hérite des couleurs du thème). */

.xfilters { display: flex; flex-direction: column; gap: .75rem; margin: 0 0 2.5rem; }
.xfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.xfilter .label { margin: 0 .5rem 0 0; min-width: 6rem; }
.xfilter a {
	padding: .3rem .85rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 999px;
	font-size: .85rem;
	text-decoration: none;
	color: inherit;
}
.xfilter a:hover { border-color: currentColor; }
.xfilter a.is-on { border-color: currentColor; background: rgba(0, 0, 0, .06); font-weight: 600; }

.xcard { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0, 0, 0, .1); }
.xcard-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.xcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xcard-body { padding: 1.25rem 1.5rem 1.5rem; }
.xcard-body h3 { margin: .25rem 0 .5rem; }
.xcard-body h3 a { color: inherit; text-decoration: none; }
.xcard-body h3 a:hover { text-decoration: underline; }
.xcard-body p { margin: 0 0 .5rem; }
.xcard-meta { opacity: .7; font-size: .85rem; }

.xsingle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.xfacts { border: 1px solid rgba(0, 0, 0, .12); padding: 1.25rem 1.5rem; }
.xfacts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
.xfacts dt { opacity: .7; }
.xfacts dd { margin: 0; font-weight: 600; }

.xlist { margin-top: 1.5rem; }

@media (max-width: 860px) {
	.xsingle { grid-template-columns: 1fr; gap: 2rem; }
}