:root {
	--bg: #0f0f10;
	--panel: #121316;
	--ink: #e5e7eb;
	--muted: #a1a1aa;
	--line: #32343a;
	--wrap: 1100px;
	--radius: 14px;
	--star: #fbbf24;
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.55 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif
}

.header {
	background: #0b0c0e;
	border-bottom: 1px solid var(--line)
}

.container {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 16px
}

.topbar {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 0
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 20px
}

.logo-square {
	width: 36px;
	height: 36px;
	border: 1px solid #9ca3af;
	border-radius: 6px;
	display: grid;
	place-items: center;
	font-size: 12px;
	color: #d1d5db
}

.nav {
	margin-left: auto
}

.nav ul {
	list-style: none;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0
}

.nav a {
	color: #e5e7eb;
	text-decoration: none;
	padding: 8px 10px;
	border-radius: 8px
}

.nav a:hover {
	background: #1b1c21
}

.login {
	color: #c7c9cf;
	font-size: 14px
}

.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 22px;
	margin: 28px 0;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden; /* ✅ content never spills outside */
}

.album {
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
	margin: 18px auto;
	max-width: 980px;
	width: 100%; /* ✅ always fits inside panel */
	background: #0f1013;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-sizing: border-box;
}

.album-title {
	margin: 0 0 10px;
	font-size: 18px
}

.controls {
	display: flex;
	justify-content: flex-start;
	margin: 8px 0 10px
}

.panel audio {
	width: 100%; /* ✅ audio controls scale with panel */
	max-width: 100%;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #0f0f10;
	color: #e5e7eb;
	cursor: pointer
}

.btn:before {
	content: "▶";
	font-size: 12px
}

.album-desc {
	margin: 0 0 10px;
	color: #d9dbe1;
	word-wrap: break-word; /* ✅ avoids long text overflow */
}

.picture {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: repeating-linear-gradient(135deg, #16181d 0 14px, #121418 14px 28px);
	width: 280px;
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9aa0a6;
	font-size: 36px;
	margin: 14px auto;
	overflow: hidden;
}

.picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 11px;
}

.duration {
	justify-self: center
}



.detail {
	display: flex;
	justify-content: center;
	margin-top: 12px
}

.btn-detail {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid #cfd3da;
	border-radius: 12px;
	font-weight: 800;
	text-decoration: none;
	color: #e5e7eb
}

.btn-detail:hover {
	filter: brightness(.95)
}

.footer {
	max-width: var(--wrap);
	margin: 28px auto 40px;
	padding: 12px 16px;
	color: var(--muted);
	text-align: center;
	border-top: 1px solid var(--line)
}

@media (max-width: 720px) {
	.meta {
		grid-template-columns: 1fr;
		gap: 8px
	}
	.duration,
	.rating {
		justify-self: start
	}
	.picture {
		max-height: 240px;
	}
}

@media (max-width: 480px) {
	.picture {
		max-height: 200px;
	}
}

.tier {
	width: 33%;
}

.cont {
	display: flex;
	text-align: center;
}

.ajouter {
	border: 1px solid var(--line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}




.tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
.tag{
	border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--line);
  }






.rating {
	justify-self: end
}

.star {
	color: #4b5563
}

.star.filled {
	color: var(--star)
}