/* =============================================================
   Fr-Eg Player — thème 2027 : barre fixe en verre sombre,
   liseré dégradé piloté par --freg-color / --freg-accent.
   ============================================================= */

#freg-player {
	--freg-color: #8BC34A;
	--freg-accent: #424242;
	--freg-height: 92px;
	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: rgba(9, 9, 12, .92);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border-top: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 -10px 40px rgba(0,0,0,.6);
}
#freg-bar::before {
	content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--freg-color), var(--freg-accent));
}
.freg-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 18px; }

/* Bandeau direct défilant (titre + radio) */
#freg-banner {
	display: flex; align-items: center; gap: 8px;
	background: linear-gradient(90deg, var(--freg-color), var(--freg-accent));
	color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	padding: 4px 10px; overflow: hidden;
}
#freg-banner .freg-dot { flex-shrink: 0; }
.freg-mq { flex: 1; overflow: hidden; white-space: nowrap; }
.freg-mq-track {
	display: inline-flex; gap: 48px; white-space: nowrap;
	animation: freg-mq 16s linear infinite;
	will-change: transform;
}
.freg-mq:hover .freg-mq-track { animation-play-state: paused; }
@keyframes freg-mq { to { transform: translateX(-50%); } }
.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: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
	background: linear-gradient(135deg, var(--freg-color), var(--freg-accent));
	color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 22px rgba(210,23,35,.5);
	transition: transform .15s ease;
}
#freg-play:hover { transform: scale(1.08); }
#freg-play:active { transform: scale(.94); }
#freg-play svg { width: 22px; height: 22px; }

/* Pochette */
#freg-art {
	width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
	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 4px 14px rgba(0,0,0,.5);
	border: 1px solid rgba(255,255,255,.14);
}
#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: #F2F4F8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freg-meta { font-size: 12px; color: #9AA3B2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sélecteur de stations */
#freg-stations {
	display: flex; align-items: center; gap: 5px; flex-shrink: 0;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
	border-radius: 16px; padding: 4px;
}
.freg-station { width: 50px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.freg-station img { max-height: 38px; max-width: 44px; width: auto; height: auto; object-fit: contain; }
.freg-station-fallback {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 10px;
	color: #fff; font-weight: 700; font-size: 15px; font-family: 'Space Grotesk', sans-serif;
}
.freg-station:hover { background: rgba(255,255,255,.1); }
.freg-station.freg-active { background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px var(--freg-color); }

/* Groupe d'icônes */
#freg-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#freg-volume { display: flex; align-items: center; gap: 8px; color: #9AA3B2; flex-shrink: 0; }
#freg-volume svg { width: 20px; height: 20px; }
#freg-vol { width: 90px; accent-color: var(--freg-color); }

#freg-history, #freg-cast {
	width: 42px; height: 42px; border-radius: 50%;
	color: #9AA3B2; display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
#freg-history:hover, #freg-cast:hover { background: rgba(255,255,255,.1); color: #fff; }
#freg-history.freg-open, #freg-cast.freg-casting { background: var(--freg-color); 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: calc(var(--freg-height, 92px) + 24px + 10px);
	max-width: 720px; margin: 0 auto 10px;
	background: rgba(14, 14, 18, .96); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
	backdrop-filter: blur(20px);
	box-shadow: 0 20px 60px rgba(0,0,0,.7);
	overflow: hidden; z-index: 10000;
}
.freg-hist-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.freg-hist-title { font-weight: 700; font-size: 13px; color: #fff; font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; text-transform: uppercase; letter-spacing: .06em; }
#freg-hist-search {
	flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
	color: #F2F4F8; padding: 7px 15px; font-size: 13px; outline: none;
}
#freg-hist-search::placeholder { color: #6B7280; }
#freg-hist-search:focus { border-color: var(--freg-color); }
#freg-hist-close { font-size: 20px; line-height: 1; color: #9AA3B2; flex-shrink: 0; }
#freg-hist-close:hover { color: #fff; }
.freg-hist-list { max-height: 250px; overflow-y: auto; padding: 8px 16px; }
.freg-hist-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.freg-hist-item:last-child { border-bottom: 0; }
.freg-hist-thumb { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, var(--freg-color), var(--freg-accent)); 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: 15px; height: 15px; }
.freg-hist-song { flex: 1; font-size: 13px; font-weight: 600; color: #E8EAF0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freg-hist-station { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FF8A94; background: rgba(210,23,35,.2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.freg-hist-time { font-size: 12px; color: #9AA3B2; flex-shrink: 0; }
.freg-loading, .freg-empty { font-size: 13px; color: #9AA3B2; padding: 14px 0; }

/* Responsive */
@media (max-width: 900px) { #freg-volume { display: none; } }
@media (max-width: 640px) {
	#freg-player { --freg-height: 150px; }
	.freg-inner { display: grid; grid-template-columns: 56px 50px 1fr auto; grid-template-rows: auto auto; gap: 10px; padding: 10px 12px 8px; }
	#freg-play { grid-column: 1; grid-row: 1; width: 56px; height: 56px; }
	#freg-play svg { width: 26px; height: 26px; }
	#freg-art { grid-column: 2; grid-row: 1; }
	#freg-info { grid-column: 3; grid-row: 1; display: block; min-width: 0; }
	#freg-actions { grid-column: 4; grid-row: 1; gap: 2px; padding: 3px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; }
	#freg-actions > button { width: 40px; height: 40px; }
	#freg-stations { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 8px; padding: 4px 6px; }
	.freg-station { width: 48px; height: 46px; }
	.freg-station img { max-height: 34px; max-width: 42px; }
	.freg-song { font-size: 15px; }
	#freg-banner { font-size: 10px; }
	#freg-history-panel { max-width: calc(100% - 16px); bottom: calc(var(--freg-height) + 10px); }
	.freg-hist-list { max-height: 200px; }
}
@media (max-width: 380px) {
	.freg-inner { grid-template-columns: 56px 1fr auto; }
	#freg-art { display: none; }
	#freg-info { grid-column: 2; }
	#freg-actions { grid-column: 3; }
}

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