/* =====================================================================
   Filtre « par catégorie » des pages money (template-liste-money.php)
   ---------------------------------------------------------------------
   Desktop : FAB flottant en bas à droite + popover ancré au-dessus.
   Mobile  : grand bouton pleine largeur sous le titre + bottom sheet.
   Les composants sont inertes sans JS : sans JS, le bouton inline mobile
   reste masqué (hidden), le FAB et le panneau n'apparaissent pas, et les
   cartes s'affichent toutes (aucune dégradation).
   ===================================================================== */

/* Le FAB flottant (fixed, bas droite) ne doit pas recouvrir le footer en
   bas de page : on donne de l'air au bas de l'archive quand le filtre est
   présent ET actif (JS a retiré hidden) — :has, sans effet si non supporté. */
.archive-page:has(> .money-filter:not([hidden])) {
	padding-bottom: 150px;
}

/* ---- Bouton déclencheur : contenu commun ---- */
.money-filter__fab-main,
.money-filter__inline-main {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.money-filter__fab-label,
.money-filter__inline-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.money-filter__fab-caret,
.money-filter__inline-caret {
	font-size: 18px;
	opacity: .85;
	flex: 0 0 auto;
	transition: transform .2s;
}
.money-filter__fab[aria-expanded="true"] .money-filter__fab-caret,
.money-filter__inline-btn[aria-expanded="true"] .money-filter__inline-caret {
	transform: rotate(180deg);
}

/* Sans JS : tout le filtre reste masqué (attribut hidden posé côté PHP).
   !important pour garantir que rien (media query comprise) ne ré-affiche un
   composant encore hidden (fenêtre avant l'exécution du JS). */
.money-filter[hidden],
.money-filter__inline[hidden],
.money-filter__panel[hidden],
.money-filter__backdrop[hidden] {
	display: none !important;
}

/* ---- Desktop : FAB flottant (affiché ≥ 720px, JS actif) ---- */
.money-filter__fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 20px 0 16px;
	border-radius: 18px;
	border: 0;
	background: var(--primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--font-sans);
	box-shadow: 0 10px 30px rgba(0, 64, 224, .35), 0 2px 6px rgba(0, 64, 224, .2);
	transition: background .2s, transform .15s, box-shadow .2s;
}
.money-filter__fab:hover {
	background: var(--primary-container);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(0, 64, 224, .4);
}
.money-filter__fab:active { transform: translateY(0); }
.money-filter__fab-ico { font-size: 24px; line-height: 1; }
@media (max-width: 719px) {
	.money-filter__fab { display: none; }
}

/* ---- Mobile : grand bouton pleine largeur sous le titre ---- */
.money-filter__inline {
	display: none;
	margin: -4px 0 22px;
}
.money-filter__inline-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 54px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--primary);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: var(--font-sans);
	box-shadow: 0 6px 18px rgba(0, 64, 224, .22);
}
.money-filter__inline-btn:hover { background: var(--primary-container); }
.money-filter__inline-ico { font-size: 22px; line-height: 1; }
.money-filter__inline-btn .money-filter__inline-label { font-size: 15px; }
@media (max-width: 719px) {
	.money-filter__inline { display: block; }
}

/* ---- Panneau (popover desktop / bottom sheet mobile) ---- */
.money-filter__panel {
	position: fixed;
	z-index: 70;
	right: 22px;
	bottom: 92px; /* 22 (marge) + 56 (FAB) + 14 */
	width: 400px;
	max-width: calc(100vw - 44px);
	max-height: min(70vh, 560px);
	display: none;
	flex-direction: column;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(21, 28, 39, .18);
	overflow: hidden;
}
.money-filter__panel.is-open { display: flex; }
.money-filter__panel-head {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 10px;
}
.money-filter__panel-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
}
.money-filter__panel-close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-full);
	border: 0;
	background: var(--surface-container-low);
	color: var(--on-surface-variant);
	font-size: 18px;
	line-height: 1;
}
.money-filter__panel-close:hover { background: var(--surface-container); }
.money-filter__panel-body {
	overflow-y: auto;
	padding: 8px;
}
.money-filter__panel-body::-webkit-scrollbar { width: 8px; }
.money-filter__panel-body::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 4px; }

/* Option « Toutes les catégories » */
.money-filter__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	border-radius: var(--radius);
	background: var(--primary-fixed);
	color: var(--on-primary-fixed);
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	font-family: var(--font-sans);
}
.money-filter__all:hover { background: var(--primary-fixed); filter: brightness(.97); }
.money-filter__all .money-filter__n {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--on-primary-fixed-variant);
}
.money-filter__all[aria-selected="false"] {
	background: transparent;
	color: var(--on-surface);
	font-weight: 600;
}
.money-filter__all[aria-selected="false"]:hover { background: var(--surface-container-low); }

/* Groupes par pilier */
.money-filter__group-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--outline);
	padding: 14px 12px 6px;
}
.money-filter__group-label .rule { flex: 1; height: 1px; background: var(--outline-variant); opacity: .6; }

/* Option famille */
.money-filter__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--on-surface);
	text-align: left;
	font-family: var(--font-sans);
}
.money-filter__opt:hover { background: var(--surface-container-low); }
.money-filter__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.money-filter__opt .lbl {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.money-filter__opt .lbl-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.money-filter__opt .money-filter__n {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--outline);
	font-weight: 700;
	flex: 0 0 auto;
}
.money-filter__opt[aria-selected="true"] {
	background: var(--primary-fixed);
	color: var(--on-primary-fixed);
	font-weight: 600;
}
.money-filter__opt[aria-selected="true"] .money-filter__n { color: var(--on-primary-fixed-variant); }

/* Backdrop */
.money-filter__backdrop {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(21, 28, 39, .45);
	opacity: 0;
	transition: opacity .22s;
}
.money-filter__backdrop.is-on { opacity: 1; }
@media (min-width: 720px) {
	/* Desktop : pas d'assombrissement, on ferme au clic extérieur / Échap. */
	.money-filter__backdrop { display: none; }
}

/* ---- Mobile : bottom sheet ---- */
@media (max-width: 719px) {
	.money-filter__panel {
		inset: auto 0 0 0;
		width: 100%;
		max-width: none;
		max-height: 82vh;
		border-radius: 20px 20px 0 0;
		border: 0;
		/* Toujours affiché pour l'animation, hors écran quand fermé. */
		display: flex;
		visibility: hidden;
		transform: translateY(100%);
		transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
	}
	.money-filter__panel.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform .28s cubic-bezier(.2, .8, .2, 1);
	}
	.money-filter__panel-head { display: flex; }
	.money-filter__panel-body {
		max-height: 60vh;
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}
}

/* Masque les cartes non retenues par le filtre (JS pose la classe). */
.money-filter__grid .post-card.is-filtered-out { display: none; }

/* Respect de prefers-reduced-motion : pas d'animation. */
@media (prefers-reduced-motion: reduce) {
	.money-filter__panel,
	.money-filter__panel.is-open {
		transition: none;
	}
}