/* ============================================================================
   WebMusicLibrary v2 — feuille de style de l'app publique
   ============================================================================
   ORGANISATION (sections cherchables par « === ») :
     Tokens & base · Toast · Raccourcis clavier · Visualiseur · Mode théâtre ·
     Topbar · Contenu/loader · En-tête d'album · Time Machine · Panneau FX ·
     Accueil (hero, ajouts récents) · Dans la même veine · Grille de dossiers ·
     Tracklist · Player bar · Responsive (768 puis 480) · reduced-motion

   CONVENTIONS :
   - Le thème passe par les tokens :root ci-dessous — ne PAS coder de couleur
     ou de police en dur dans les sections. Pour un rgba() dérivé de l'accent :
     rgba(var(--accent-rgb), alpha).
   - L'accent est répliqué hors CSS (pas de token possible) : <meta
     name="theme-color"> dans index.html et theme_color dans manifest.json.
     Les fallbacks JS lisent la valeur calculée de --accent (audio.js,
     waveform.js, ui.js) — rien à changer côté JS lors d'un rethème.
   - Règle de base d'un composant d'abord, ses overrides @media après elle
     (jamais avant : à spécificité égale, c'est l'ordre qui tranche).
   - Échelle z-index : contenu 1-10 · topbar/menu 50-60 · viz plein écran 100 ·
     FX mobile 200 · théâtre 502 · overlay raccourcis 600 · toast 700.
   ============================================================================ */

/* === Tokens & base === */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Polices vendorées (fonts/, woff2 latin) — pas de CDN à l'exécution.
   Space Grotesk : titres (grotesque géométrique, un peu machine).
   IBM Plex Mono : les DONNÉES — durées, compteurs, BPM. Cette app mesure ;
   ses chiffres sont sa langue, on les affiche comme des afficheurs. */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* Thème « Cabine DJ » : noirs chauds bitume + ambre VU-mètre. La couleur
   vive reste réservée à l'état (lecture, actif) ; la vie chromatique vient
   des pochettes et de la teinte dominante de l'album (--accent-album). */
:root {
	/* Fonds, du plus profond au plus élevé */
	--bg-primary: #0f0d0a;
	--bg-secondary: #171410;
	--bg-elevated: #252019;
	--bg-hover: #2c261d;
	--player-bg: #171410;
	/* Texte — blanc chaud, jamais #fff pur */
	--text-primary: #f2ecdf;
	--text-secondary: #b5ab99;
	--text-muted: #78705f;
	/* Accent — la déclinaison RGB sert aux rgba(var(--accent-rgb), a) */
	--accent: #ffb224;
	--accent-hover: #ffc44d;
	--accent-rgb: 255, 178, 36;
	/* Typographie — display pour les titres, mono pour les données */
	--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-display: 'Space Grotesk', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
	/* Géométrie — rayons resserrés, façon panneau de matériel */
	--border: #3a332a;
	--radius: 4px;
	--radius-lg: 8px;
	--player-height: 90px;
	--topbar-height: 64px;
}

html, body {
	height: 100%;
	font-family: var(--font-ui);
	background: var(--bg-primary);
	color: var(--text-primary);
	overflow: hidden;
}

/* Layout racine : colonne topbar / contenu scrollable / player bar */
.app {
	display: flex;
	flex-direction: column;
	/* 100vh sur Android = hauteur viewport URL bar cachée (max), donc le bas
	   de l'app passe sous la nav system. 100dvh s'adapte dynamiquement à la
	   zone visible réelle. Fallback 100vh pour les vieux browsers. */
	height: 100vh;
	height: 100dvh;
}

/* Rôles typographiques transverses (assignés ici, une seule fois) :
   les titres parlent en display… */
.section-title, .album-name, .daily-name, .dj-card-title, .theater-track,
.topbar-logo, .shortcuts-title {
	font-family: var(--font-display);
}

/* …et les données parlent en mono : index, durées, heures, compteurs, BPM. */
.track-index, .track-duration, .player-time,
.track-sub-bpm, .folder-subcount, .home-card-label, .album-label,
.dj-card-readout {
	font-family: var(--font-mono);
}

/* === Toast notification === */
.toast {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 700;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
	animation: toastIn 0.3s ease-out, toastOut 0.3s ease-in 3.2s forwards;
	max-width: 320px;
}

.toast-cover {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
}

.toast-info {
	overflow: hidden;
}

.toast-folder {
	font-size: 11px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.toast-track {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@keyframes toastIn {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

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

@media (max-width: 480px) {
	.toast {
		right: 8px;
		left: 8px;
		max-width: none;
	}
}

/* === Shortcuts overlay === */
.shortcuts-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}

.shortcuts-panel {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
	max-width: 480px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
}

.shortcuts-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.shortcuts-title {
	font-size: 16px;
	font-weight: 700;
}

.shortcuts-close {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 24px;
	cursor: pointer;
}

.shortcuts-close:hover {
	color: var(--text-primary);
}

.shortcuts-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.shortcuts-section h3 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.shortcut-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	font-size: 13px;
	color: var(--text-secondary);
}

kbd {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 12px;
	font-family: inherit;
	color: var(--text-primary);
}

.kbd-gesture {
	font-size: 12px;
	color: var(--text-primary);
}

/* === Visualizer === */
.viz-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #000;
	pointer-events: none;
}

/* Background mode: behind everything, blurred */
.viz-canvas.viz-bg {
	z-index: -1;
	filter: blur(20px) brightness(0.4);
	opacity: 0.7;
}

/* Fullscreen mode: above everything, sharp */
.viz-canvas.viz-full {
	z-index: 100;
	filter: none;
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

/* When viz background is active, make UI layers semi-transparent */
body.viz-bg-active {
	background: transparent;
}

.app.viz-bg-active {
	background: transparent;
}

.app.viz-bg-active .topbar {
	background: rgba(24, 24, 24, 0.75);
}

.app.viz-bg-active .content {
	background: transparent;
}

.app.viz-bg-active .player-bar {
	background: rgba(24, 24, 24, 0.85);
}

.app.viz-bg-active .folder-card {
	background: rgba(24, 24, 24, 0.7);
}

.app.viz-bg-active .folder-cover-wrapper {
	background: rgba(40, 40, 40, 0.7);
}

.app.viz-bg-active .back-card {
	border-color: rgba(51, 51, 51, 0.5);
}

.app.viz-bg-active .track-row:hover {
	background: rgba(42, 42, 42, 0.7);
}


/* === Theater mode === */
.theater {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 502;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
}

.theater-bg {
	position: absolute;
	top: -20%;
	left: -20%;
	width: 140%;
	height: 140%;
	background-size: cover;
	background-position: center;
	filter: blur(60px) brightness(0.2) saturate(1.5);
	z-index: 0;
	opacity: 0.6;
}

.theater-topbar {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.theater-btn-small {
	background: rgba(255,255,255,0.1);
	border: none;
	color: rgba(255,255,255,0.5);
	font-size: 20px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
}

.theater-btn-small:hover {
	background: rgba(255,255,255,0.2);
	color: #fff;
}

.theater-controls {
	position: absolute;
	bottom: 60px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 24px;
}

.theater-btn {
	background: none;
	border: none;
	color: rgba(255,255,255,0.6);
	font-size: 24px;
	cursor: pointer;
	transition: color 0.15s, transform 0.1s;
}

.theater-btn:hover {
	color: #fff;
	transform: scale(1.1);
}

.theater-btn-play {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.theater-btn-play:hover {
	background: rgba(255,255,255,0.25);
}

.theater-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 500px;
	width: 90%;
}

.theater-cover {
	width: 280px;
	height: 280px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
	animation: theaterFloat 6s ease-in-out infinite;
}

@keyframes theaterFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.theater-info {
	text-align: center;
}

.theater-folder {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 8px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.theater-track {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.theater-progress {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: height 0.3s ease;
}

.theater-progress-bar {
	height: 100%;
	background: #fff;
	width: 0%;
	transition: width 0.5s linear;
}

/* Waveform en mode théâtre : la barre passe en pleine hauteur */
.theater-waveform {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.theater-progress.wf-ready {
	height: 48px;
	background: transparent;
}

.theater-progress.wf-ready .theater-progress-bar {
	opacity: 0;
}

.theater-progress.wf-ready .theater-waveform {
	opacity: 1;
}

.theater-time {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	font-variant-numeric: tabular-nums;
}

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

	.theater-track {
		font-size: 20px;
	}
}

/* === Top bar === */
.topbar {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--topbar-height);
	padding: 0 24px;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

.topbar-logo {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--accent);
	cursor: pointer;
	flex-shrink: 0;
	line-height: 1;
}

.topbar-logo:hover {
	transform: scale(1.1);
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	color: var(--text-secondary);
	overflow: hidden;
	flex: 1;
	/* min-width: 0 est essentiel pour que le flex child puisse réellement
	   shrinker plus petit que son contenu natif (overflow peut alors couper). */
	min-width: 0;
}

/* === Search === */
.search-wrapper {
	flex-shrink: 0;
}

.search-input {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 20px;
	color: var(--text-primary);
	padding: 6px 16px;
	font-size: 13px;
	width: 220px;
	outline: none;
	transition: border-color 0.15s, width 0.2s;
}

.search-input:focus {
	border-color: var(--accent);
	width: 300px;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

.search-input::placeholder {
	color: var(--text-muted);
}

.topbar-btn {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 18px;
	cursor: pointer;
	padding: 6px;
	border-radius: 50%;
	transition: color 0.15s;
	flex-shrink: 0;
}

.topbar-btn:hover {
	color: var(--text-primary);
}

.topbar-btn.active {
	color: var(--accent);
}

.topbar-menu-wrapper {
	position: relative;
	flex-shrink: 0;
}

.topbar-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 4px 0;
	min-width: 200px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	z-index: 60;
}

@media (max-width: 768px) {
	.topbar-menu {
		position: fixed;
		top: auto;
		right: 8px;
		left: 8px;
		bottom: auto;
		top: 56px;
		min-width: auto;
		border-radius: var(--radius-lg);
	}
}

.topbar-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	color: var(--text-secondary);
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.1s, color 0.1s;
}

.topbar-menu-item:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.topbar-menu-item.active {
	color: var(--accent);
}

.breadcrumb-separator {
	color: var(--text-muted);
	flex-shrink: 0;
}

.breadcrumb-item {
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.15s;
}

.breadcrumb-item:hover {
	color: var(--text-primary);
}

.breadcrumb-home {
	color: var(--accent);
	font-weight: 600;
}

.breadcrumb-home:hover {
	color: var(--accent-hover);
}

/* === Main content === */
.content {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	padding-bottom: calc(var(--player-height) + 24px);
}

/* En mode Time Machine, on annule le padding pour que l'histogramme sticky
   colle au topbar et que les sections années prennent toute la largeur. */
.content.tm-mode {
	padding: 0;
	padding-bottom: calc(var(--player-height));
}

.content::-webkit-scrollbar {
	width: 8px;
}

.content::-webkit-scrollbar-track {
	background: transparent;
}

.content::-webkit-scrollbar-thumb {
	background: var(--bg-elevated);
	border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

/* === Loader === */
.loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px;
	color: var(--text-secondary);
	font-size: 14px;
}

.spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--bg-elevated);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* === Album header === */
.album-header {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 16px 24px;
	background: rgba(24, 24, 24, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

.album-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	cursor: pointer;
	margin-top: auto;
	transition: color 0.15s, border-color 0.15s;
}

.album-back:hover {
	color: var(--text-primary);
	border-color: var(--text-primary);
}

.album-cover {
	width: 180px;
	height: 180px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	flex-shrink: 0;
}

.album-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.album-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.album-name {
	font-size: 28px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.2;
	margin-bottom: 8px;
	word-break: break-word;
}

.album-meta {
	font-size: 13px;
	color: var(--text-secondary);
}

@media (max-width: 768px) {
	.album-header {
		padding: 10px 12px;
		gap: 12px;
		align-items: stretch;
	}

	.album-cover {
		width: 56px;
		height: 56px;
		align-self: center;
	}

	.album-info {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-self: stretch;
	}

	.album-label {
		font-size: 10px;
	}

	.album-name {
		font-size: 14px;
		margin-bottom: 2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.album-meta {
		font-size: 11px;
	}

	.album-back {
		margin-top: 4px;
		padding: 4px 10px;
		font-size: 12px;
		align-self: flex-start;
	}
}

/* ==============================================
   Time Machine — cinematic vertical timeline
   ============================================== */

.tm-root {
	display: block !important;
	width: 100%;
	margin: 0;
	padding: 0;
	grid-template-columns: unset !important;
}

/* Histogramme sticky en haut */
.tm-hist {
	position: sticky;
	top: 0;
	z-index: 10;
	background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.88) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 12px 24px 8px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.tm-hist-current {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}

.tm-hist-svg {
	display: block;
	width: 100%;
	height: 54px;
	overflow: visible;
}

.tm-bar-group { cursor: pointer; }
.tm-bar-click { fill: transparent; }
.tm-bar-group:hover .tm-bar-click { fill: rgba(255,255,255,0.05); }

.tm-bar {
	fill: rgba(255,255,255,0.3);
	pointer-events: none; /* le clic est géré par le groupe (colonne entière) */
	transition: fill 0.15s;
}
.tm-bar-group:hover .tm-bar { fill: rgba(var(--accent-rgb), 0.85); }
.tm-bar.active, .tm-bar-group.active .tm-bar { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }

.tm-hist-labels {
	position: relative;
	height: 14px;
	margin-top: 2px;
}
.tm-hist-label {
	position: absolute;
	transform: translateX(-50%);
	font-size: 10px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* Sections années */
.tm-years {
	padding: 0;
}

.tm-year-section {
	position: relative;
	min-height: 70vh;
	min-height: 70dvh;
	display: flex;
	align-items: center;
	overflow: hidden;
	scroll-margin-top: 90px; /* compense la hauteur de l'histogramme sticky */
}

.tm-year-bg {
	position: absolute;
	inset: -80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	filter: blur(12px) brightness(0.65) saturate(1.4);
	opacity: 1;
	z-index: 0;
	gap: 0;
	/* Scale initial : le parallax JS ajoute un translateY variable. */
	transform: translate3d(0, 0, 0) scale(1.12);
	transform-origin: center;
	will-change: transform;
}

.tm-year-bg-tile {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Ken Burns retiré : remplacé par du parallax piloté en JS (updateScroll).
   Si jamais tu veux le réactiver pour une section sans scroll actif :
   .tm-year-bg { animation: tmKenBurns 40s ease-in-out infinite alternate; }
   @keyframes tmKenBurns { from { transform: scale(1.1); } to { transform: scale(1.2); } } */

.tm-year-overlay {
	position: absolute;
	inset: 0;
	/* Overlay plus fort : comme le blur est réduit, on compense pour garder
	   le texte lisible par-dessus les pochettes bien visibles. */
	background: linear-gradient(180deg,
		rgba(10,10,10,0.55) 0%,
		rgba(10,10,10,0.75) 60%,
		rgba(10,10,10,0.85) 100%);
	z-index: 1;
}

.tm-year-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 48px 48px 40px;
	color: #fff;
}

.tm-year-num {
	font-family: var(--font-display);
	font-size: clamp(64px, 14vw, 180px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: #fff;
	text-shadow:
		0 8px 32px rgba(0,0,0,0.6),
		0 0 80px var(--tm-accent, transparent);
	margin: 0 0 12px;
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tm-year-section.tm-visible .tm-year-num {
	opacity: 1;
	transform: translateY(0);
}

.tm-year-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease-out 0.15s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.tm-year-section.tm-visible .tm-year-meta {
	opacity: 1;
	transform: translateY(0);
}

.tm-meta-chip {
	background: rgba(255,255,255,0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	color: #fff;
	/* La bordure prend la couleur dominante de la cover iconique (--tm-accent) */
	border: 1px solid var(--tm-accent, rgba(255,255,255,0.25));
	box-shadow: 0 0 12px -2px var(--tm-accent, transparent);
}

/* Strip horizontale des albums */
.tm-album-strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 4px 20px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.tm-album-strip::-webkit-scrollbar { height: 6px; }
.tm-album-strip::-webkit-scrollbar-track { background: transparent; }
.tm-album-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

.tm-album-card {
	flex: 0 0 180px;
	scroll-snap-align: start;
	cursor: pointer;
	/* Animation d'entrée en cascade (stagger via :nth-child) */
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tm-album-card:hover {
	transform: translateY(-6px);
	transition: transform 0.25s;
}
.tm-album-card:hover .tm-album-cover {
	box-shadow: 0 20px 48px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.4);
}

.tm-year-section.tm-visible .tm-album-card {
	opacity: 1;
	transform: translateY(0);
}
/* Cascade : décalage progressif des 12 premières cartes */
.tm-year-section.tm-visible .tm-album-card:nth-child(1)  { transition-delay: 0.25s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(2)  { transition-delay: 0.30s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(3)  { transition-delay: 0.35s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(4)  { transition-delay: 0.40s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(5)  { transition-delay: 0.45s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(6)  { transition-delay: 0.50s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(7)  { transition-delay: 0.55s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(8)  { transition-delay: 0.60s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(9)  { transition-delay: 0.65s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(10) { transition-delay: 0.70s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(11) { transition-delay: 0.75s; }
.tm-year-section.tm-visible .tm-album-card:nth-child(n+12) { transition-delay: 0.80s; }

.tm-album-cover {
	transition: box-shadow 0.25s, transform 0.25s;
}

/* ===== Séparateur de décennie ===== */
.tm-decade-divider {
	position: relative;
	padding: 60px 48px 20px;
	text-align: center;
	background: linear-gradient(180deg, #000 0%, rgba(10,10,10,0.7) 100%);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	overflow: hidden;
}
.tm-decade-label {
	display: inline-block;
	font-family: var(--font-display);
	font-size: clamp(48px, 9vw, 120px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	text-transform: uppercase;
	opacity: 0.85;
}
@media (max-width: 768px) {
	.tm-decade-divider { padding: 30px 20px 12px; }
	.tm-decade-label { font-size: clamp(40px, 14vw, 80px); }
}

.tm-album-cover {
	width: 180px;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
	background: #1a1a1a;
	display: block;
}

/* Accessibility : respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.tm-year-bg { animation: none; }
	.tm-year-num, .tm-year-meta, .tm-album-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.tm-album-name {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.tm-album-artist {
	font-size: 11px;
	color: rgba(255,255,255,0.65);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
	margin-top: 2px;
}

.tm-footer {
	padding: 24px;
	text-align: center;
	font-size: 12px;
	color: var(--text-muted);
	background: var(--bg-primary);
}

/* Responsive mobile */
@media (max-width: 768px) {
	.tm-root { margin: 0; }
	.tm-hist { padding: 10px 16px 6px; }
	.tm-year-section { min-height: 70vh; min-height: 70dvh; }
	.tm-year-inner { padding: 24px 20px 32px; }
	.tm-year-num { font-size: clamp(64px, 24vw, 140px); }
	.tm-album-card { flex: 0 0 140px; }
	.tm-album-cover { width: 140px; height: 140px; }
	.tm-album-name, .tm-album-artist { max-width: 140px; }
	/* Sur mobile, blur léger pour rester fluide + pochettes restent visibles */
	.tm-year-bg { filter: blur(8px) brightness(0.65) saturate(1.4); }
}

/* === Effects panel === */
.fx-panel {
	position: fixed;
	bottom: var(--player-height);
	right: 16px;
	width: 280px;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	padding: 16px;
	z-index: 50;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}

.fx-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.fx-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

.fx-close {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 20px;
	cursor: pointer;
}

.fx-close:hover {
	color: var(--text-primary);
}

.fx-row {
	display: grid;
	grid-template-columns: 50px 1fr 50px;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.fx-row label {
	font-size: 12px;
	color: var(--text-secondary);
}

.fx-val {
	font-size: 11px;
	color: var(--text-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.fx-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	background: var(--bg-elevated);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.fx-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	background: var(--accent);
	border-radius: 50%;
	cursor: pointer;
}

.fx-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: var(--accent);
	border-radius: 50%;
	border: none;
	cursor: pointer;
}

.fx-actions {
	text-align: center;
	margin-top: 8px;
}

.fx-reset {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	color: var(--text-secondary);
	padding: 4px 16px;
	border-radius: 12px;
	font-size: 11px;
	cursor: pointer;
}

.fx-reset:hover {
	color: var(--text-primary);
	border-color: var(--text-muted);
}

@media (max-width: 768px) {
	.fx-panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: auto;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		z-index: 200;
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
}

/* === Sections === */
.section {
	margin-bottom: 32px;
}

/* === Accueil : hero (album du jour + session DJ) + ajouts récents === */
.home-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	max-width: 1000px;
	margin-bottom: 36px;
}

/* Étiquette intégrée aux cartes du hero (remplace les titres de section empilés) */
.home-card-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.daily-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: 16px;
	cursor: pointer;
	height: 100%;
	transition: transform 0.15s;
}

.daily-card:hover {
	transform: translateY(-2px);
}

.daily-cover {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--bg-elevated);
	flex-shrink: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.daily-name {
	font-size: 17px;
	font-weight: 700;
	margin-top: 6px;
	line-height: 1.3;
}

/* Carte Session DJ : LA porte d'entrée « je veux juste de la musique » */
.dj-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22) 0%, var(--bg-secondary) 70%);
	border-radius: var(--radius-lg);
	padding: 16px;
	cursor: pointer;
	transition: transform 0.15s;
}

.dj-card:hover {
	transform: translateY(-2px);
}

.dj-card-play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--accent);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	padding-left: 5px; /* centrage optique du triangle */
	flex-shrink: 0;
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.35);
	transition: background 0.15s, transform 0.15s;
}

.dj-card:hover .dj-card-play {
	background: var(--accent-hover);
	transform: scale(1.06);
}

.dj-card-title {
	font-size: 17px;
	font-weight: 700;
	margin-top: 6px;
}

.dj-card-desc {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 4px;
	line-height: 1.4;
}

/* Ligne de statut façon afficheur : la bibliothèque annonce ses chiffres */
.dj-card-readout {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	color: var(--accent);
	opacity: 0.75;
	margin-top: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bande horizontale scrollable des derniers albums arrivés */
.recent-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: thin;
}

.recent-strip .folder-card {
	flex: 0 0 120px;
}

.recent-strip .folder-name {
	font-size: 11px;
}

/* === Dans la même veine === */
/* Cartes plus petites que la grille de dossiers : piste de flânerie, pas la
   navigation principale. */
#similar-grid {
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}

#similar-grid .folder-name {
	font-size: 11px;
}

@media (max-width: 480px) {
	#similar-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
	}
}

.section-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 16px;
}

/* === Directory grid === */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

.folder-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	overflow: hidden;
}

.folder-card:hover {
	background: var(--bg-elevated);
	transform: translateY(-2px);
}

.folder-cover-wrapper {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-elevated);
	flex-shrink: 0;
}

.folder-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.folder-icon {
	font-size: 36px;
	opacity: 0.85;
}

.folder-name {
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	color: var(--text-secondary);
	word-break: break-word;
	line-height: 1.3;
	padding: 10px 8px;
}

.folder-subcount {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

.folder-card:hover .folder-name {
	color: var(--text-primary);
}

/* === Back button === */
.back-card {
	background: transparent;
	border: 1px dashed var(--border);
}

.back-card .folder-cover-wrapper {
	background: transparent;
}

.back-card:hover {
	background: var(--bg-hover);
	border-color: var(--text-muted);
}

/* === Track list === */
.tracklist {
	display: flex;
	flex-direction: column;
}

.track-row {
	display: grid;
	grid-template-columns: 40px 1fr auto 60px;
	align-items: center;
	padding: 10px 16px;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background 0.15s;
	gap: 12px;
}

.track-duration {
	font-size: 13px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	text-align: right;
	min-width: 40px;
}

.track-artist {
	display: block;
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 2px;
}

.track-row:hover {
	background: var(--bg-hover);
}

.track-row.active {
	background: var(--bg-elevated);
}

.track-row.active .track-name {
	color: var(--accent);
}

.track-row.flash {
	animation: trackFlash 1.5s ease-out;
}

@keyframes trackFlash {
	0% { background: var(--accent); }
	100% { background: transparent; }
}

.track-index {
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.track-row:hover .track-index,
.track-row.active .track-index {
	color: var(--text-secondary);
}

/* Now playing bars animation */
.now-playing-bars {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	height: 16px;
	width: 100%;
}

.now-playing-bars span {
	display: block;
	width: 3px;
	min-height: 3px;
	background: var(--accent);
	border-radius: 1px;
	animation: nowPlaying 0.6s ease-in-out infinite alternate;
}

.now-playing-bars span:nth-child(1) { animation-delay: 0s; }
.now-playing-bars span:nth-child(2) { animation-delay: 0.15s; }
.now-playing-bars span:nth-child(3) { animation-delay: 0.3s; }
.now-playing-bars span:nth-child(4) { animation-delay: 0.1s; }

@keyframes nowPlaying {
	0% { height: 20%; }
	100% { height: 100%; }
}

.track-name {
	font-size: 15px;
	font-weight: 400;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.track-folder {
	display: block;
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

/* Sub-line d'infos de piste (artist · format · year) */
.track-submeta {
	display: block;
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 3px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.track-sub-artist { color: var(--text-secondary); font-weight: 500; }
.track-sub-sep { margin: 0 6px; opacity: 0.4; }
.track-sub-year { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.track-sub-genre {
	color: #c0c0c0;
	font-style: italic;
	font-size: 10.5px;
}

/* Tempo détecté (analyse waveform serveur, affiché seulement si fiable) */
.track-sub-bpm {
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 10px;
	font-weight: 600;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.player-bpm {
	font-size: 10px;
	font-weight: 600;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin-left: 2px;
}

.player-bpm:empty {
	display: none;
}

.track-fmt {
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 1px 5px;
	border-radius: 3px;
	vertical-align: 1px;
}
.track-fmt-lossless { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.track-fmt-high     { color: #67b5ff; background: rgba(103,181,255,0.12); }
.track-fmt-mid      { color: #a0a0a0; background: rgba(160,160,160,0.1); }
.track-fmt-low      { color: #ff9f3f; background: rgba(255,159,63,0.12); }

/* Legacy : le span .track-artist (avant la sub-line) n'est plus généré mais
   l'existant continue à rendre correctement. */
.track-artist { display: none; }

.track-ext {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	text-align: right;
}


/* === Player bar === */
.player-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto;
	align-items: center;
	/* env(safe-area-inset-bottom) : 0 partout sauf Android edge-to-edge (barre
	   de gestes transparente) et iOS PWA — la barre s'étend dessous au lieu de
	   se faire recouvrir. */
	height: calc(var(--player-height) + env(safe-area-inset-bottom, 0px));
	padding: 0 16px env(safe-area-inset-bottom, 0px);
	background: var(--player-bg);
	border-top: 2px solid var(--border);
	flex-shrink: 0;
	gap: 16px;
	transition: border-top-color 0.3s;
}

.player-track {
	display: flex;
	align-items: center;
	gap: 12px;
	overflow: hidden;
}

.player-dl {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 18px;
	flex-shrink: 0;
	padding: 4px;
	transition: color 0.15s;
}

.player-dl:hover {
	color: var(--accent);
}

.player-share {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 14px;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
	transition: color 0.15s;
}

.player-share:hover {
	color: var(--accent);
}

.player-share.copied {
	color: var(--accent);
}

.player-track-icon {
	width: 48px;
	height: 48px;
	background: var(--bg-elevated);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
	color: var(--accent);
	overflow: hidden;
	position: relative;
	box-shadow: 0 0 0 3px var(--bg-elevated), 0 0 0 4px var(--border);
}

.player-track-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	animation: vinylSpin 4s linear infinite;
	animation-play-state: paused;
}

.player-track-icon::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--bg-primary);
	border-radius: 50%;
	border: 2px solid var(--border);
	z-index: 1;
}

.player-track-icon.playing img {
	animation-play-state: running;
}

@keyframes vinylSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.player-track-info {
	overflow: hidden;
}

.player-track-folder {
	font-size: 11px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player-track-folder a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.15s;
}

.player-track-folder a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.player-track-name {
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* === Player controls === */
.player-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.btn-player {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 18px;
	cursor: pointer;
	padding: 6px;
	border-radius: 50%;
	transition: color 0.15s, transform 0.1s;
	line-height: 1;
}

.btn-player:hover {
	color: var(--text-primary);
	transform: scale(1.1);
}

.btn-play {
	width: 40px;
	height: 40px;
	background: var(--accent);
	color: #000;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-play:hover {
	background: var(--accent-hover);
	color: #000;
	transform: scale(1.05);
}

.btn-crossfade {
	font-size: 14px;
}

.btn-crossfade.active {
	color: var(--accent);
}

.btn-radio {
	font-size: 14px;
}

.btn-radio.active {
	color: var(--accent);
}

.btn-autodj {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.btn-autodj.active {
	color: var(--accent);
}

/* Sélecteur d'énergie du DJ (→ stable, ↗ montée, ↘ descente) */
.btn-autodj-mode {
	font-size: 14px;
}

.btn-autodj-mode.active {
	color: var(--accent);
}


/* === Progress bar === */
.player-progress {
	display: flex;
	align-items: center;
	gap: 8px;
}

.player-time {
	font-size: 11px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	min-width: 36px;
	text-align: center;
}

/* === Custom progress bar === */
.progress-wrapper {
	flex: 1;
	height: 4px;
	background: var(--bg-elevated);
	border-radius: 2px;
	position: relative;
	cursor: pointer;
	transition: height 0.1s;
}

.progress-wrapper:hover {
	height: 6px;
}

.progress-buffered {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--text-muted);
	border-radius: 2px;
	width: 0%;
	pointer-events: none;
}

.progress-played {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--accent);
	border-radius: 2px;
	width: 0%;
	pointer-events: none;
}

.progress-thumb {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 12px;
	height: 12px;
	background: var(--text-primary);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* === Waveform seekbar === */
/* Le canvas déborde verticalement du wrapper 4px (26px centré) : la barre
   classique reste dessous en fallback et pendant le décodage, puis la
   waveform fond dessus (.wf-ready). */
.waveform-canvas {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 26px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.progress-wrapper.wf-ready .waveform-canvas {
	opacity: 1;
	pointer-events: auto;
}

.progress-wrapper.wf-ready {
	background: transparent; /* pas de rail gris sous la forme d'onde */
}

.progress-wrapper.wf-ready .progress-buffered,
.progress-wrapper.wf-ready .progress-played,
.progress-wrapper.wf-ready .progress-thumb {
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* Pas de saut de hauteur au survol quand la waveform est active */
.progress-wrapper.wf-ready:hover {
	height: 4px;
}

.wf-bubble {
	position: absolute;
	top: -32px;
	transform: translateX(-50%);
	background: var(--bg-elevated);
	color: var(--text-primary);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	padding: 3px 7px;
	border-radius: 4px;
	border: 1px solid var(--border);
	pointer-events: none;
	white-space: nowrap;
	z-index: 5;
}

.topbar-menu-item.off {
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.waveform-canvas,
	.theater-waveform,
	.theater-progress,
	.progress-wrapper.wf-ready .progress-buffered,
	.progress-wrapper.wf-ready .progress-played,
	.progress-wrapper.wf-ready .progress-thumb {
		transition: none;
	}
}

/* Mobile : bande plus basse pour ne pas mordre sur la rangée de contrôles */
@media (max-width: 768px) {
	.waveform-canvas {
		height: 20px;
	}
}

/* === Range sliders (volume only) === */
.volume-bar {
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	background: var(--bg-elevated);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
	flex: 1;
}

.volume-bar::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	background: var(--text-primary);
	border-radius: 50%;
	cursor: pointer;
}

.volume-bar::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: var(--text-primary);
	border-radius: 50%;
	border: none;
	cursor: pointer;
}

/* === Player extra (download, speed, volume) === */
.player-extra {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}

.btn-download {
	text-decoration: none;
}

.speed-select {
	background: var(--bg-elevated);
	color: var(--text-secondary);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 3px 6px;
	font-size: 12px;
	cursor: pointer;
	outline: none;
}

.speed-select:hover,
.speed-select:focus {
	color: var(--text-primary);
	border-color: var(--text-muted);
}

.volume-icon {
	font-size: 16px;
	cursor: pointer;
	color: var(--text-secondary);
	transition: color 0.15s;
}

.volume-icon:hover {
	color: var(--text-primary);
}

.volume-bar {
	width: 80px;
	flex: none;
}

/* === Empty state === */
.empty-state {
	text-align: center;
	padding: 64px 24px;
	color: var(--text-muted);
	font-size: 14px;
}

/* === Responsive === */
/* === Responsive: tablets and small screens === */
@media (max-width: 768px) {
	/* Topbar : une seule ligne, le breadcrumb tronque si nécessaire. */
	.topbar {
		padding: 0 12px;
		gap: 8px;
		height: 56px;
	}

	.topbar-right {
		margin-left: auto;
	}

	.search-input {
		width: 140px;
		font-size: 12px;
		padding: 5px 12px;
	}

	.search-input:focus {
		width: 180px;
	}

	/* Content */
	.content {
		padding: 16px;
	}

	/* Grid */
	.grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 10px;
	}

	/* Tracks */
	.track-row {
		grid-template-columns: 30px 1fr auto;
		padding: 8px 10px;
		gap: 6px;
	}

	.track-name {
		font-size: 13px;
	}

	.track-ext {
		display: none;
	}

	.track-duration {
		font-size: 12px;
	}

	/* Player bar */
	.player-bar {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		height: auto;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		gap: 6px;
		position: relative;
	}

	.player-track {
		width: 100%;
		order: 1;
	}

	.player-controls {
		order: 2;
	}

	.player-extra {
		display: none;
	}

	.player-progress {
		width: 100%;
		order: 3;
	}

	.player-track-icon {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.player-track-name {
		font-size: 13px;
	}

	.btn-player {
		padding: 8px;
		font-size: 16px;
	}

	.btn-play {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}
}

/* === Responsive: small phones === */
@media (max-width: 480px) {
	/* Sur petit écran on accepte 2 lignes : logo + search/menu, puis breadcrumb. */
	.topbar {
		height: auto;
		padding: 8px 10px;
		flex-wrap: wrap;
		gap: 6px;
	}

	.topbar-logo { order: 1; }
	.topbar-right { order: 2; margin-left: auto; }
	.breadcrumb {
		font-size: 12px;
		order: 3;
		flex-basis: 100%;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
	}
	.breadcrumb::-webkit-scrollbar { display: none; }

	.topbar-title {
		font-size: 14px;
	}

	.search-input {
		width: 120px;
	}

	.search-input:focus {
		width: 160px;
	}

	.content {
		padding: 10px;
		padding-bottom: calc(var(--player-height) + 16px);
	}

	.grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.folder-name {
		font-size: 10px;
		padding: 5px 3px;
	}

	.folder-subcount {
		font-size: 9px;
	}

	.section-title {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.track-row {
		grid-template-columns: 30px 1fr auto;
		padding: 8px 8px;
	}

	.track-index {
		font-size: 12px;
	}

	.track-name {
		font-size: 13px;
	}

	.album-cover {
		width: 120px;
		height: 120px;
	}

	.album-name {
		font-size: 18px;
	}

	.album-meta {
		font-size: 12px;
	}

	.player-bar {
		padding: 6px 8px;
	}

	.player-track-icon {
		width: 36px;
		height: 36px;
	}

	.player-track-name {
		font-size: 12px;
	}

	.player-track-folder {
		font-size: 10px;
	}
}