/* =================================================================
   Comparateur : barre de filtres + tableau « rapport officiel ».
   ================================================================= */

/* ---------- Filtres ---------- */
.gf-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-space-4);
	align-items: flex-end;
	background: var(--gf-surface);
	border: 1px solid var(--gf-line);
	border-radius: var(--gf-r-lg);
	padding: var(--gf-space-5);
	box-shadow: var(--gf-shadow-sm);
	margin-bottom: var(--gf-space-4);
}
.gf-filters__group {
	display: flex;
	flex-direction: column;
	gap: var(--gf-space-2);
	min-width: 160px;
	flex: 1 1 160px;
}
.gf-filters label {
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gf-muted);
}
.gf-filters select,
.gf-filters input[type="range"] {
	width: 100%;
	font-family: var(--gf-font-text);
}
.gf-filters select {
	padding: 0.6em 0.7em;
	border: 1px solid var(--gf-line-strong);
	border-radius: var(--gf-r-sm);
	background: var(--gf-bg);
	color: var(--gf-ink);
}
.gf-filters input[type="range"] { accent-color: var(--gf-brand); }

.gf-results-count {
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-sm);
	color: var(--gf-muted);
	margin: 0 0 var(--gf-space-4);
}

/* ---------- Tableau ---------- */
.gf-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--gf-line);
	border-radius: var(--gf-r-lg);
	background: var(--gf-surface);
}
.gf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--gf-fs-sm);
}
.gf-table thead th {
	position: sticky;
	top: 0;
	background: var(--gf-ink);
	color: var(--gf-bg);
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	text-align: left;
	padding: var(--gf-space-4);
	white-space: nowrap;
	z-index: 2;
}
.gf-table tbody td,
.gf-table tbody th {
	padding: var(--gf-space-4);
	border-top: 1px solid var(--gf-line);
	vertical-align: middle;
	text-align: left;
}
.gf-row { transition: background-color var(--gf-dur) var(--gf-ease); }
.gf-row:hover { background: var(--gf-bg-tint); }

.gf-cell-name {
	display: flex;
	align-items: center;
	gap: var(--gf-space-3);
	font-weight: 600;
	font-size: var(--gf-fs-base);
}
.gf-cell-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: var(--gf-r-sm);
	background: var(--gf-bg-tint);
	border: 1px solid var(--gf-line);
	flex: 0 0 auto;
}
.gf-cell-price {
	font-family: var(--gf-font-display);
	font-size: var(--gf-fs-h3);
	white-space: nowrap;
}
.gf-cell-action { text-align: right; }

.gf-btn--sm { padding: 0.5em 0.9em; font-size: var(--gf-fs-sm); }

.gf-noresults {
	padding: var(--gf-space-6);
	text-align: center;
	color: var(--gf-muted);
}

/* ---------- Responsive : tableau en cartes empilées ---------- */
@media (max-width: 760px) {
	.gf-table thead { display: none; }
	.gf-table,
	.gf-table tbody,
	.gf-table tr,
	.gf-table td,
	.gf-table th { display: block; width: 100%; }
	.gf-row {
		border-top: 1px solid var(--gf-line);
		padding: var(--gf-space-3);
	}
	.gf-table tbody td,
	.gf-table tbody th { border: 0; padding: var(--gf-space-2) var(--gf-space-3); }
	.gf-table tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-family: var(--gf-font-mono);
		font-size: var(--gf-fs-xs);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--gf-muted);
		margin-bottom: 2px;
	}
	.gf-cell-action { text-align: left; }
}