/* ═══════════════════════════════════════════════════════
   BreVTT — favoris.css
   ═══════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────── */
.fav_page_header {
	background: linear-gradient(135deg, #fff5f7 0%, var(--gris_clair) 100%);
	border-bottom: 1px solid #f5c0ce;
}

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

.fav_page_title svg {
	width: 26px; height: 26px;
	color: #e05a7a;
	flex-shrink: 0;
}

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

.btn_vider {
	color: var(--rouge_alerte);
	border-color: rgba(192,57,43,.3);
}

.btn_vider:hover {
	background: var(--rouge_pale);
	border-color: var(--rouge_alerte);
}

.btn_vider svg { width: 14px; height: 14px; }

/* ── Onglets ─────────────────────────────────────────── */
.fav_tabs_bar {
	background: var(--blanc);
	border-bottom: 1px solid var(--gris_bord);
	position: sticky;
	top: var(--header_h);
	z-index: 89;
	box-shadow: var(--shadow_sm);
}

.fav_tabs {
	display: flex;
	gap: 2px;
	padding: var(--gap_sm) 0;
}

.fav_tab {
	display: flex;
	align-items: center;
	gap: var(--gap_sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--gris_moyen);
	padding: 8px 18px;
	border-radius: var(--r_md);
	background: transparent;
	border: 1.5px solid transparent;
	transition: all .2s;
	cursor: pointer;
	min-height: 40px;
}

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

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

.fav_tab.active {
	color: #e05a7a;
	background: #fff0f3;
	border-color: #f5c0ce;
	font-weight: 600;
}

/* ── Main ────────────────────────────────────────────── */
.fav_main { min-height: 60vh; }

/* ── État vide ───────────────────────────────────────── */
.fav_empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gap_xxl) var(--gap_lg);
	min-height: 50vh;
}

.fav_empty_inner {
	text-align: center;
	max-width: 400px;
}

.fav_empty_icon {
	width: 80px; height: 80px;
	margin: 0 auto var(--gap_lg);
	color: #f5c0ce;
}

.fav_empty_icon svg { width: 80px; height: 80px; }

.fav_empty_inner h2 {
	font-family: var(--font_titre);
	font-size: 22px;
	font-weight: 800;
	color: var(--gris_fonce);
	margin-bottom: var(--gap_sm);
}

.fav_empty_inner p {
	font-size: 15px;
	color: var(--gris_moyen);
	line-height: 1.6;
	margin-bottom: var(--gap_lg);
}

.fav_empty_inner .btn_primary { display: inline-flex; }
.fav_empty_inner .btn_primary svg { width: 15px; height: 15px; }

/* ── Panels ──────────────────────────────────────────── */
.fav_panel { animation: fade_in .2s ease; }

#panel_liste,
#panel_cartes {
	padding: var(--gap_lg) 0 var(--gap_xxl);
}

/* Panel carte géo — hauteur calculée */
.fav_panel_carte {
	/* header(64) + page_header(≈89) + tabs(≈54) */
	height: calc(100dvh - var(--header_h) - 89px - 54px);
	min-height: 400px;
	overflow: hidden;
}

/* ── Barre filtres ───────────────────────────────────── */
.fav_filtres_bar {
	display: flex;
	align-items: center;
	gap: var(--gap_md);
	margin-bottom: var(--gap_lg);
	flex-wrap: wrap;
}

.fav_filtre_search {
	flex: 1;
	min-width: 200px;
}

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

.fav_filtres_chips {
	display: flex;
	gap: var(--gap_xs);
	flex-wrap: wrap;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
	.fav_page_header .page_header_inner { flex-direction: column; align-items: flex-start; }
	.fav_header_actions { width: 100%; }
	.fav_filtres_bar { flex-direction: column; align-items: stretch; }
	.fav_filtres_right { justify-content: space-between; }

	/* Labels masqués sur mobile, icônes seules */
	.fav_tab { padding: 8px 12px; }
}

/* ── Badge nocturne ──────────────────────────────────── */
/* La couleur du badge vit dans style.css, et nulle part ailleurs : la copie qui
   se trouvait ici était chargée après et écrasait silencieusement toute
   retouche faite à l'original — le badge changeait partout sauf sur cette page. */

.badge_nocturne {
	display:                 inline-flex;
	align-items:             center;
	gap:                     3px;
	font-size:               10px;
	font-weight:             700;
	padding:                 2px 7px;
	border-radius:           20px;
	background:              #1a1a2e;
	color:                   #a78bfa;
	border:                  1px solid #4c1d95;
	white-space:             nowrap;
}

/* ── Widget météo ────────────────────────────────────── */
.meteo_widget {
	display:                 inline-flex;
	align-items:             center;
	gap:                     5px;
	font-size:               12px;
	font-weight:             600;
	padding:                 3px 8px;
	border-radius:           20px;
	background:              var(--gris_clair);
	border:                  1px solid var(--gris_bord);
	color:                   var(--gris_fonce);
	white-space:             nowrap;
	cursor:                  help;
}

.meteo_widget .meteo_icon {
	font-size:               14px;
}

.meteo_widget .meteo_temp {
	font-weight:             700;
	color:                   var(--vert_foret);
}

.meteo_widget.loading {
	color:                   var(--gris_moyen);
	font-style:              italic;
}

/* ── Map favoris ─────────────────────────────────────── */
#fav_map {
	width:                   100%;
	height:                  100%;
}

/* ── Sidebar favoris carte — filtres en haut, liste en bas ── */
#fav_carte_sidebar .sidebar_body {
	flex:                    0 0 auto;
	max-height:              60%;
	overflow-y:              auto;
	min-height:              0;
}

#fav_carte_sidebar .sidebar_events {
	flex:                    1;
	min-height:              80px;
}