/**
 * Réalisations category / sub-category filter.
 * Inline-reveal design ported from the standalone reference artifact.
 * All rules are namespaced under .avp-rf so they never leak into the Uncode theme.
 */

.avp-rf {
	--rf-green: #58974C;
	--rf-green-d: #477d3d;
	--rf-green-tint: rgba(88, 151, 76, .10);
	--rf-ink: #23251f;
	--rf-muted: #75736c;
	--rf-faint: #9b988f;
	--rf-bg: #ffffff;
	--rf-line: #e8e6df;
	--rf-line-strong: #dad7cd;

	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rf-line);
	transition: box-shadow .25s;
	color: var(--rf-ink);
	font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.avp-rf.stuck {
	box-shadow: 0 6px 20px -12px rgba(30, 32, 26, .25);
}

.avp-rf .avp-rf-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

/* T-2069 follow-up (2026-10-03): with École added the row grew to 8 top
   categories and started wrapping onto two lines at 1280/1440. Use more of the
   available width and tighten spacing so it fits one line again on desktop. */
@media (min-width: 1280px) {
	.avp-rf .avp-rf-wrap {
		max-width: 1320px;
		padding: 0 16px;
	}
}

.avp-rf *,
.avp-rf *::after,
.avp-rf *::before {
	box-sizing: border-box;
}

/* Section label ("Catégories" + short rule) */
.avp-rf .cat-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 28px;
}

.avp-rf .cat-head .lbl {
	color: var(--rf-green);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .015em;
}

.avp-rf .cat-head .ln {
	height: 1.5px;
	width: 66px;
	background: var(--rf-green);
}

.avp-rf .cat-head.sub {
	padding-top: 0;
}

.avp-rf .cat-head.sub .lbl {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--rf-green);
}

.avp-rf .cat-head.sub .ln {
	width: 44px;
	opacity: .55;
}

/* Top category row */
.avp-rf .cat-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 34px;
	padding: 18px 0 20px;
}

.avp-rf .cat-btn {
	position: relative;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--rf-muted);
	letter-spacing: .005em;
	padding: 6px 0;
	transition: color .18s;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.avp-rf .cat-btn:hover {
	color: var(--rf-ink);
}

.avp-rf .cat-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--rf-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .26s cubic-bezier(.4, 0, .1, 1);
}

.avp-rf .cat-btn:hover::after {
	transform: scaleX(.4);
	opacity: .4;
}

.avp-rf .cat-btn.active {
	color: var(--rf-green);
}

.avp-rf .cat-btn.active::after {
	transform: scaleX(1);
	opacity: 1;
}

.avp-rf .cat-btn .car {
	/* inline SVG chevron, sized/styled to match .avp-nav-link__chevron (header.css) */
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	opacity: .55;
	transition: transform .25s;
}

.avp-rf .cat-btn.open .car {
	transform: rotate(180deg);
}

/* Inline sub-category reveal */
@keyframes avpRfSubIn {
	from { transform: translateY(-9px); opacity: .4; }
	to   { transform: translateY(0); opacity: 1; }
}

.avp-rf .sub-reveal {
	animation: avpRfSubIn .4s cubic-bezier(.4, 0, .1, 1) both;
	padding: 6px 0 30px;
}

.avp-rf .sub-reveal[hidden] {
	display: none;
}

.avp-rf .sub-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 16px;
}

.avp-rf .pill {
	background: #fff;
	border: 1px solid var(--rf-line-strong);
	color: var(--rf-muted);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 17px;
	border-radius: 100px;
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	text-decoration: none;
}

.avp-rf .pill:hover {
	border-color: var(--rf-green);
	color: var(--rf-green);
}

.avp-rf .pill .pc {
	font-size: 10.5px;
	font-weight: 700;
	opacity: .7;
}

.avp-rf .pill.on {
	background: var(--rf-green);
	border-color: var(--rf-green);
	color: #fff;
}

.avp-rf .pill.on .pc {
	opacity: .85;
}

/* Desktop one-row fix (T-2069 follow-up, 2026-10-03): nowrap + a tighter gap
   and slightly smaller (still readable) label size so all 8 categories,
   including the longest FR/EN labels (Développement immobilier /
   Repositionnement d'actif / Real estate development / Asset repositioning),
   fit on a single line at 1280px and 1440px. Scoped to >900px so it never
   fights the mobile/tablet horizontal-scroll treatment below. Deliberately
   placed AFTER the base .cat-row/.cat-btn/.sub-row rules above: a media
   query does not add specificity on its own, so this has to win on SOURCE
   ORDER against those same-specificity selectors, not just by being
   conditional (caught live: this block originally sat right after .cat-row's
   own base rule, higher up, and the later unconditional
   ".avp-rf .cat-btn { font-size: 16px; }" kept winning on desktop). */
@media (min-width: 901px) {
	.avp-rf .cat-row {
		flex-wrap: nowrap;
		gap: 8px 20px;
	}
	.avp-rf .cat-btn {
		font-size: 14.5px;
	}
	.avp-rf .sub-row {
		flex-wrap: nowrap;
	}
}

@media (max-width: 900px) {
	.avp-rf .avp-rf-wrap {
		padding: 0 16px;
	}
	.avp-rf .cat-row {
		gap: 10px 22px;
	}

	/* T-2069 follow-up (2026-10-03): 8 categories (with École) no longer fit
	   even wrapped without looking cramped on mobile/tablet, so instead of
	   wrapping onto multiple lines the row becomes a single horizontal-scroll
	   strip - nowrap, snap-to-item, 44px tap height, hidden-but-functional
	   scrollbar, a subtle edge fade hinting there is more, and the active
	   category auto-scrolled into view on load (realisations-filter.js). The
	   sub-category pill row gets the identical treatment when it also would
	   have wrapped. */
	.avp-rf .cat-row,
	.avp-rf .sub-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 16px;
		scrollbar-width: none; /* Firefox: functional scroll, no visible bar */
		padding-bottom: 6px; /* room for the focus ring, clear of the edge fade */
	}
	.avp-rf .cat-row::-webkit-scrollbar,
	.avp-rf .sub-row::-webkit-scrollbar {
		display: none; /* Chrome/Safari: same - hidden, still scrollable */
		height: 0;
	}
	.avp-rf .cat-btn {
		scroll-snap-align: start;
		flex-shrink: 0;
		min-height: 44px;
	}
	.avp-rf .pill {
		scroll-snap-align: start;
		flex-shrink: 0;
		min-height: 44px;
	}

	/* Edge-fade hint: lives on the OUTER (non-scrolling) wrapper so it sits on
	   top of the scroll strip instead of being clipped by its own overflow. */
	.avp-rf .cat-row-outer,
	.avp-rf .sub-row-outer {
		position: relative;
	}
	.avp-rf .cat-row-outer::before,
	.avp-rf .cat-row-outer::after,
	.avp-rf .sub-row-outer::before,
	.avp-rf .sub-row-outer::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 6px; /* matches the row's own padding-bottom above */
		width: 24px;
		pointer-events: none; /* never block a tap on the button/pill underneath */
		z-index: 2;
	}
	.avp-rf .cat-row-outer::before,
	.avp-rf .sub-row-outer::before {
		left: 0;
		background: linear-gradient(to right, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
	}
	.avp-rf .cat-row-outer::after,
	.avp-rf .sub-row-outer::after {
		right: 0;
		background: linear-gradient(to left, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
	}
}

/**
 * No-results state for the realisation grid.
 *
 * A sibling of .avp-rf rather than a descendant, because it replaces the grid
 * further down the page, so it repeats the palette locally instead of inheriting
 * the custom properties scoped to .avp-rf. Deliberately readable with no CSS at
 * all: the markup is a paragraph plus a link, so a page that renders this before
 * the stylesheet lands still says the right thing.
 */
.avp-rf-empty {
	margin: 32px 0 48px;
	padding: 28px 24px;
	border: 1px solid #e8e6df;
	border-radius: 10px;
	background: #fbfbf9;
	text-align: center;
}

.avp-rf-empty .avp-rf-empty-msg {
	margin: 0;
	color: #23251f;
	font-size: 17px;
	line-height: 1.5;
}

.avp-rf-empty .avp-rf-empty-reset {
	margin: 12px 0 0;
}

.avp-rf-empty .avp-rf-empty-reset a {
	color: #58974C;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.avp-rf-empty .avp-rf-empty-reset a:hover,
.avp-rf-empty .avp-rf-empty-reset a:focus {
	color: #477d3d;
}

@media (max-width: 900px) {
	.avp-rf-empty {
		margin: 24px 16px 36px;
		padding: 22px 18px;
	}
}