/* =============================================================
 * Fr-Eg Player — player.css
 * Barre fixe, panneau historique, responsive.
 * Couleurs pilotées par les variables --freg-color / --freg-accent.
 * ============================================================= */

#freg-player {
	--freg-color: #E51937;
	--freg-accent: #0078D7;
	--freg-height: 96px;
	font-family: inherit;
}

#freg-player * { box-sizing: border-box; }

#freg-player button {
	background: none; border: 0; cursor: pointer; color: inherit;
	font: inherit; -webkit-tap-highlight-color: transparent;
}

/* ---------- Barre principale ---------- */
#freg-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
	background: #fff;
	border-top: 3px solid var(--freg-color);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}

.freg-inner {
	max-width: 1152px; margin: 0 auto;
	display: flex; align-items: center; gap: 14px;
	padding: 10px 16px;
}

/* ---------- Bandeau direct ---------- */
#freg-banner {
	background: var(--freg-color);
	color: #fff; text-align: center;
	font-size: 11px; font-weight: 600; letter-spacing: .08em;
	padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.freg-dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #fff; margin-right: 6px; vertical-align: middle;
	animation: freg-pulse 1.6s infinite;
}
@keyframes freg-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- Bouton lecture ---------- */
#freg-play {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--freg-color); color: #fff;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; transition: transform .15s ease;
}
#freg-play:hover { transform: scale(1.06); }
#freg-play:active { transform: scale(.95); }
#freg-play svg { width: 22px; height: 22px; }

/* ---------- Pochette ---------- */
#freg-art {
	width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
	background: linear-gradient(135deg, var(--freg-color), var(--freg-accent));
	background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	overflow: hidden;
}
#freg-art svg { width: 24px; height: 24px; opacity: 0; }
#freg-art:not(.freg-has-art) svg { opacity: 1; }

/* ---------- Infos ---------- */
#freg-info { flex: 1 1 auto; min-width: 0; }
.freg-song {
	font-size: 14px; font-weight: 700; color: #0f172a;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.freg-meta {
	font-size: 12px; color: #64748b; margin-top: 2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Sélecteur de stations ---------- */
#freg-stations {
	display: flex; align-items: center; gap: 4px;
	background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 14px;
	padding: 4px; flex-shrink: 0;
}
.freg-station {
	width: 48px; height: 42px; border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease;
}
.freg-station img { max-height: 36px; max-width: 42px; width: auto; height: auto; object-fit: contain; }
.freg-station-fallback {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 8px;
	color: #fff; font-weight: 900; font-size: 15px;
}
.freg-station:hover { background: #fff; }
.freg-station.freg-active { background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .18); }

/* Survol d'un logo : agrandissement (hauteur doublée) + petite secousse */
@keyframes freg-pop-shake {
	0%   { transform: scale(1); }
	55%  { transform: scale(2) rotate(0deg); }
	64%  { transform: scale(2) rotate(-7deg); }
	73%  { transform: scale(2) rotate(6deg); }
	82%  { transform: scale(2) rotate(-4deg); }
	91%  { transform: scale(2) rotate(2deg); }
	100% { transform: scale(2) rotate(0deg); }
}
.freg-station:hover img,
.freg-station:hover .freg-station-fallback {
	animation: freg-pop-shake .55s ease both;
	transform-origin: center bottom;
	z-index: 5;
	position: relative;
}
.freg-station:not(:hover) img,
.freg-station:not(:hover) .freg-station-fallback {
	transition: transform .18s ease;
}
@media (prefers-reduced-motion: reduce) {
	.freg-station:hover img,
	.freg-station:hover .freg-station-fallback { animation: none; transform: scale(1.35); }
}

/* ---------- Volume ---------- */
#freg-volume { display: flex; align-items: center; gap: 8px; color: #64748b; flex-shrink: 0; }
#freg-volume svg { width: 20px; height: 20px; }
#freg-vol { width: 90px; accent-color: var(--freg-color); }

/* ---------- Boutons rondes (historique, cast) ---------- */
#freg-history, #freg-cast {
	width: 40px; height: 40px; border-radius: 50%;
	color: #94a3b8; display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; transition: background .15s ease, color .15s ease;
}
#freg-history:hover, #freg-cast:hover { background: #f1f5f9; color: #334155; }
#freg-history.freg-open, #freg-cast.freg-casting { background: #1e293b; color: #fff; }
#freg-history svg, #freg-cast svg { width: 20px; height: 20px; }

/* ---------- Panneau « Trouver ce titre » ---------- */
#freg-history-panel {
	position: fixed; left: 0; right: 0; bottom: var(--freg-bar-height, 106px);
	max-width: 720px; margin: 0 auto 10px;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	overflow: hidden; z-index: 10000;
}
#freg-player #freg-history-panel { bottom: 106px; }

.freg-hist-header {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; border-bottom: 1px solid #f1f5f9;
}
.freg-hist-title { font-weight: 900; font-size: 13px; color: #0f172a; flex-shrink: 0; }
#freg-hist-search {
	flex: 1; border: 1px solid #e2e8f0; border-radius: 999px;
	padding: 6px 14px; font-size: 13px; outline: none;
}
#freg-hist-search:focus { border-color: var(--freg-color); }
#freg-hist-close { font-size: 20px; line-height: 1; color: #94a3b8; flex-shrink: 0; }
#freg-hist-close:hover { color: #334155; }

.freg-hist-list { max-height: 240px; overflow-y: auto; padding: 6px 14px; }
.freg-hist-item {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 0; border-bottom: 1px solid #f8fafc;
}
.freg-hist-item:last-child { border-bottom: 0; }
.freg-hist-thumb {
	width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
	background: var(--freg-color);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.freg-hist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.freg-hist-thumb svg { width: 14px; height: 14px; }
.freg-hist-song { flex: 1; font-size: 13px; font-weight: 600; color: #1e293b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freg-hist-time { font-size: 12px; color: #94a3b8; flex-shrink: 0; }
.freg-loading, .freg-empty { font-size: 13px; color: #94a3b8; padding: 12px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	#freg-volume { display: none; }
}

/* Mobile : layout 2 lignes, gros boutons, titre visible */
@media (max-width: 640px) {
	#freg-player { --freg-height: 152px; }

	.freg-inner {
		display: grid;
		grid-template-columns: 54px 48px 1fr 44px 44px;
		align-items: center;
		gap: 10px;
		padding: 10px 12px 8px;
	}
	#freg-play  { grid-column: 1; width: 54px; height: 54px; }
	#freg-play svg { width: 26px; height: 26px; }
	#freg-art   { grid-column: 2; width: 48px; height: 48px; border-radius: 10px; }
	#freg-art svg { width: 22px; height: 22px; }
	#freg-info  { grid-column: 3; display: block; min-width: 0; }
	#freg-cast  { grid-column: 4; width: 44px; height: 44px; }
	#freg-history { grid-column: 5; width: 44px; height: 44px; }
	#freg-history svg, #freg-cast svg { width: 22px; height: 22px; }

	/* 2e ligne : les radios, grandes et accessibles au pouce */
	#freg-stations {
		grid-column: 1 / -1;
		display: flex; align-items: center; gap: 8px;
		padding-top: 2px;
	}
	.freg-station { width: 46px; height: 44px; border-radius: 10px; }
	.freg-station img { max-height: 32px; max-width: 40px; }
	.freg-station-fallback { width: 32px; height: 32px; font-size: 14px; border-radius: 8px; }

	.freg-song { font-size: 15px; font-weight: 800; }
	.freg-meta { font-size: 12px; }
	#freg-banner { font-size: 10px; letter-spacing: .05em; }

	/* Panneau historique au-dessus de la barre mobile */
	#freg-history-panel { bottom: 152px; max-width: calc(100% - 16px); }
	#freg-player #freg-history-panel { bottom: 152px; }
	.freg-hist-list { max-height: 200px; }
}
@media (max-width: 380px) {
	.freg-inner { grid-template-columns: 54px 1fr 44px 44px; }
	#freg-art { display: none; }
	#freg-info { grid-column: 2; }
	#freg-cast { grid-column: 3; }
	#freg-history { grid-column: 4; }
	.freg-station { width: 42px; height: 42px; }
}

/* Accessibilité : focus visible */
#freg-player button:focus-visible,
#freg-hist-search:focus-visible { outline: 2px solid var(--freg-color); outline-offset: 2px; }