/* ═══════════════════════════════════════════════════════
   BreVTT — liste.css
   Styles spécifiques à la page liste/tableau
   ═══════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────── */
.page_header {
	background: var(--gris_clair);
	border-bottom: 1px solid var(--gris_bord);
	padding: var(--gap_xl) 0 var(--gap_lg);
}

.page_header_inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap_lg);
	flex-wrap: wrap;
}

.page_title {
	font-family: var(--font_titre);
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--gris_fonce);
	margin-bottom: 4px;
}

.page_subtitle {
	font-size: 15px;
	color: var(--gris_moyen);
}

/* ── Barre filtres ───────────────────────────────────── */
.filtres_bar {
	background: var(--blanc);
	border-bottom: 1px solid var(--gris_bord);
	padding: var(--gap_md) 0;
	position: sticky;
	top: var(--header_h);
	z-index: 90;
	box-shadow: var(--shadow_sm);
}

.filtres_inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap_md);
}

/* Recherche texte */
.filtre_search {
	display: flex;
	align-items: center;
	gap: var(--gap_sm);
	background: var(--gris_clair);
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_md);
	padding: 8px 14px;
	transition: border-color .2s;
}

.filtre_search:focus-within {
	border-color: var(--vert_foret);
	background: var(--blanc);
}

.filtre_search svg {
	width: 16px; height: 16px;
	color: var(--gris_moyen);
	flex-shrink: 0;
}

.filtre_search input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 14px;
	color: var(--gris_fonce);
}

.filtre_search input::placeholder { color: var(--gris_moyen); }

.filtre_clear_text {
	font-size: 12px;
	color: var(--gris_moyen);
	padding: 2px 6px;
	border-radius: var(--r_sm);
	transition: color .2s;
}

.filtre_clear_text:hover { color: var(--rouge_alerte); }

/* Groupe de filtres */
.filtres_groupe {
	display: flex;
	gap: var(--gap_lg);
	flex-wrap: wrap;
	align-items: flex-end;
}

.filtre_item {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.filtre_label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--gris_moyen);
}

/* Zone géographique */
.filtre_geo_wrap {
	display: flex;
	gap: var(--gap_xs);
	align-items: center;
}

.filtre_geo_wrap input[type="text"] {
	width: 130px;
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_sm);
	padding: 6px 10px;
	font-size: 13px;
	color: var(--gris_fonce);
	outline: none;
	background: var(--gris_clair);
	transition: border-color .2s, background .2s;
}

.filtre_geo_wrap input[type="text"]:focus {
	border-color: var(--vert_foret);
	background: var(--blanc);
}

.btn_geo_small {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: var(--gris_clair);
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_sm);
	color: var(--gris_moyen);
	transition: all .2s;
}

.btn_geo_small svg { width: 15px; height: 15px; }

.btn_geo_small:hover {
	background: var(--vert_pale);
	border-color: var(--vert_foret);
	color: var(--vert_foret);
}

/* Dates */
.filtre_dates {
	display: flex;
	align-items: center;
	gap: var(--gap_sm);
}

.filtre_dates input[type="date"] {
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_sm);
	padding: 6px 10px;
	font-size: 13px;
	color: var(--gris_fonce);
	font-family: var(--font_corps);
	background: var(--gris_clair);
	outline: none;
	transition: border-color .2s, background .2s;
}

.filtre_dates input[type="date"]:focus {
	border-color: var(--vert_foret);
	background: var(--blanc);
}

.date_sep {
	font-size: 13px;
	color: var(--gris_moyen);
}

/* Chips activité dans filtres */
.filtre_chips_wrap {
	display: flex;
	gap: var(--gap_xs);
}

/* Select générique */
.filtre_select {
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_sm);
	padding: 6px 28px 6px 10px;
	font-size: 13px;
	font-family: var(--font_corps);
	color: var(--gris_fonce);
	background: var(--gris_clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7266' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") no-repeat right 8px center;
	appearance: none;
	outline: none;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.filtre_select:focus {
	border-color: var(--vert_foret);
	background-color: var(--blanc);
}

/* Actions filtres */
.filtres_actions {
	display: flex;
	justify-content: flex-end;
}

.btn_reset_filtres {
	display: inline-flex;
	align-items: center;
	gap: var(--gap_xs);
	font-size: 12px;
	font-weight: 500;
	color: var(--gris_moyen);
	padding: 5px 12px;
	border: 1px solid var(--gris_bord);
	border-radius: var(--r_sm);
	background: transparent;
	transition: all .2s;
}

.btn_reset_filtres svg { width: 13px; height: 13px; }
.btn_reset_filtres:hover { color: var(--rouge_alerte); border-color: var(--rouge_alerte); }

/* ── Barre filtres actifs ─────────────────────────────── */
.filtres_actifs_bar {
	background: var(--ocre_pale);
	border-bottom: 1px solid rgba(193,123,47,.2);
	padding: 6px 0;
	font-size: 12px;
	color: var(--ocre);
}

.filtres_actifs_bar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap_md);
}

.btn_reset_filtres_small {
	font-size: 12px;
	font-weight: 600;
	color: var(--ocre);
	text-decoration: underline;
}

/* ── Barre résultats + tri + vue ─────────────────────── */
.liste_main {
	padding: var(--gap_lg) 0 var(--gap_xxl);
}

.resultats_bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap_md);
	margin-bottom: var(--gap_lg);
	flex-wrap: wrap;
}

.resultats_count {
	font-size: 14px;
	color: var(--gris_moyen);
	font-weight: 500;
}

.resultats_count strong {
	color: var(--gris_fonce);
	font-weight: 700;
}

.resultats_actions {
	display: flex;
	align-items: center;
	gap: var(--gap_md);
}

.tri_wrap {
	display: flex;
	align-items: center;
	gap: var(--gap_sm);
}

.vue_toggle {
	display: flex;
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_sm);
	overflow: hidden;
}

.vue_btn {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	color: var(--gris_moyen);
	background: var(--blanc);
	transition: all .2s;
	border-right: 1px solid var(--gris_bord);
}

.vue_btn:last-child { border-right: none; }
.vue_btn svg { width: 15px; height: 15px; }

.vue_btn:hover { background: var(--gris_clair); color: var(--gris_fonce); }

.vue_btn.active {
	background: var(--vert_foret);
	color: var(--blanc);
}

/* ── Vue container ───────────────────────────────────── */
.vue_container { animation: fade_in .25s ease; }

@keyframes fade_in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Tableau ─────────────────────────────────────────── */
.table_wrap {
	overflow-x: auto;
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_lg);
	box-shadow: var(--shadow_sm);
}

.events_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

/* En-têtes */
.events_table thead th {
	background: var(--gris_clair);
	padding: 12px 14px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--gris_moyen);
	border-bottom: 1.5px solid var(--gris_bord);
	white-space: nowrap;
	user-select: none;
}

.events_table thead th:first-child { border-radius: var(--r_md) 0 0 0; }
.events_table thead th:last-child  { border-radius: 0 var(--r_md) 0 0; }

.th_sortable { cursor: pointer; }
.th_sortable:hover { color: var(--vert_foret); }

.sort_arrow {
	font-size: 11px;
	color: var(--gris_bord);
	margin-left: 4px;
}

.sort_arrow.active_asc,
.sort_arrow.active_desc {
	color: var(--vert_foret);
}

/* Lignes */
.events_table tbody tr {
	border-bottom: 1px solid var(--gris_bord);
	transition: background .15s;
}

.events_table tbody tr:last-child { border-bottom: none; }
.events_table tbody tr:hover { background: var(--vert_pale); }
.events_table tbody tr.row_annule { opacity: .5; }

.events_table tbody td {
	padding: 12px 14px;
	vertical-align: middle;
	color: var(--gris_fonce);
}

/* Colonnes spécifiques */
.col_date { white-space: nowrap; font-variant-numeric: tabular-nums; }

.td_date_jour {
	font-weight: 700;
	font-size: 15px;
}

.td_date_info {
	font-size: 11px;
	color: var(--gris_moyen);
	margin-top: 1px;
}

.col_nom { min-width: 200px; }

.td_nom {
	font-weight: 600;
	color: var(--gris_fonce);
	line-height: 1.3;
}

.td_heure {
	font-size: 12px;
	color: var(--gris_moyen);
	margin-top: 2px;
}

.col_lieu { white-space: nowrap; }

.td_ville {
	font-weight: 500;
}

.td_dept {
	font-size: 11px;
	color: var(--gris_moyen);
	margin-top: 1px;
}

/* Les badges d'activité tenaient sur une seule ligne coûte que coûte : un
   événement qui cumule VTT, gravel et cyclo réservait à lui seul 240 px et
   poussait la colonne d'actions hors du cadre. Ils s'enroulent maintenant. */
.col_activite {
	white-space: normal;
	min-width: 104px;
	max-width: 190px;
}

/* Le retour à la ligne se fait ENTRE les badges, jamais à l'intérieur : sans
   cela, le pictogramme se retrouve seul au-dessus de son libellé. */
.col_activite .tag {
	white-space: nowrap;
	margin: 1px 0;
}

.col_type     { white-space: nowrap; }

.col_parcours { min-width: 140px; }

.td_parcours {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.col_tarif { white-space: nowrap; font-variant-numeric: tabular-nums; }

.td_tarif_gratuit { color: var(--vert_foret); font-weight: 600; }
.td_tarif_payant  { color: var(--ocre);       font-weight: 600; }
.td_tarif_libre   { color: var(--gris_moyen); font-weight: 500; }

.col_action { width: 122px; text-align: right; }

/* Cœur + « Voir » sur une seule ligne, alignés à droite de la colonne. */
.td_actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--gap_sm);
}

/* Dans un tableau, le cœur accompagne l'action principale : il reste plus
   petit que sur une carte, où il est lui-même une action de premier plan. */
.td_actions .btn_favori {
	width: 26px;
	height: 26px;
}

.td_btn_voir {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--vert_foret);
	padding: 5px 12px;
	border: 1.5px solid var(--vert_foret);
	border-radius: var(--r_sm);
	transition: all .2s;
	white-space: nowrap;
}

.td_btn_voir:hover {
	background: var(--vert_foret);
	color: var(--blanc);
}

/* ── Pagination ──────────────────────────────────────── */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap_sm);
	margin-top: var(--gap_xl);
	flex-wrap: wrap;
}

.page_btn {
	min-width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--gris_fonce);
	background: var(--blanc);
	border: 1.5px solid var(--gris_bord);
	border-radius: var(--r_sm);
	padding: 0 10px;
	transition: all .2s;
	font-variant-numeric: tabular-nums;
}

.page_btn:hover:not(:disabled) {
	border-color: var(--vert_foret);
	color: var(--vert_foret);
}

.page_btn.active {
	background: var(--vert_foret);
	border-color: var(--vert_foret);
	color: var(--blanc);
}

.page_btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.page_ellipsis {
	font-size: 14px;
	color: var(--gris_moyen);
	padding: 0 4px;
}

/* ══════════════════════════════════════════ RESPONSIVE ══ */
@media (max-width: 900px) {
	.filtres_groupe {
		gap: var(--gap_md);
	}

	/* Masquer colonnes secondaires en tablette */
	.col_type,
	.col_parcours {
		display: none;
	}
}

@media (max-width: 640px) {
	.filtres_bar {
		position: static; /* évite les conflits sur mobile */
	}

	.filtres_groupe {
		flex-direction: column;
		gap: var(--gap_md);
	}

	.filtre_dates {
		flex-wrap: wrap;
	}

	.filtre_dates input[type="date"] {
		width: 100%;
	}

	.filtre_geo_wrap input[type="text"] {
		width: 100px;
	}

	.resultats_bar { flex-direction: column; align-items: flex-start; }

	/* Masquer colonnes en mobile */
	.col_activite,
	.col_type,
	.col_parcours,
	.col_tarif {
		display: none;
	}

	/* Vue cartes par défaut en mobile */
	.vue_container { display: none; }
	#vue_cartes    { display: block !important; }
	#btn_vue_cartes { background: var(--vert_foret); color: var(--blanc); }
	#btn_vue_tableau { background: var(--blanc); color: var(--gris_moyen); }
}