/* ==========================================================================
   Line Audio Widget — v2.4.0
   Author: Okcedric (okcedric.com)
   ========================================================================== */

.law-player {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}

/* ── Reset boutons ─────────────────────────────────────────────────────── */
.law-player button {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	box-sizing: border-box;
	line-height: 1;
}

/* ── Playlist ──────────────────────────────────────────────────────────── */
.law-playlist {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

/* ── Track ─────────────────────────────────────────────────────────────── */
.law-track {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background-color: #ffffff;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	box-sizing: border-box;
	width: 100%;
	touch-action: pan-y; /* scroll vertical libre, bloque horizontal */
}
.law-track:not(.is-active):hover { background-color: #f2fafa; }
.law-track.is-active              { background-color: #e4f4f3; }

/* ── One Line ──────────────────────────────────────────────────────────── */
.law-oneline {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background-color: #ffffff;
	border-radius: 6px;
	border: 1px solid #d0e8e8;
	box-sizing: border-box;
	width: 100%;
	flex-wrap: nowrap;
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.law-btn-play,
.law-btn-prev,
.law-btn-next,
.law-btn-volume {
	color: #3AAFA9;
	background-color: transparent;
	transition: color 0.15s, transform 0.1s;
	flex-shrink: 0;
}
.law-btn-play:hover,
.law-btn-prev:hover,
.law-btn-next:hover,
.law-btn-volume:hover { color: #2d8c87; }
.law-btn-play:active,
.law-btn-prev:active,
.law-btn-next:active  { transform: scale(0.9); }

.law-btn-play svg   { width: 28px; height: 28px; display: block; }
.law-btn-prev svg,
.law-btn-next svg   { width: 22px; height: 22px; display: block; }
.law-btn-volume svg { width: 20px; height: 20px; display: block; }

/* play/pause toggle */
.law-btn-play .icon-pause                              { display: none; }
.law-track.is-playing .law-btn-play .icon-play,
.law-oneline.is-playing .law-btn-play .icon-play       { display: none; }
.law-track.is-playing .law-btn-play .icon-pause,
.law-oneline.is-playing .law-btn-play .icon-pause      { display: block; }

/* volume/mute toggle */
.law-btn-volume .icon-mute                             { display: none; }
.law-track.is-muted .law-btn-volume .icon-volume,
.law-oneline.is-muted .law-btn-volume .icon-volume     { display: none; }
.law-track.is-muted .law-btn-volume .icon-mute,
.law-oneline.is-muted .law-btn-volume .icon-mute       { display: block; }

/* Focus */
.law-btn-play:focus-visible,
.law-btn-prev:focus-visible,
.law-btn-next:focus-visible,
.law-btn-volume:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ── Info piste ─────────────────────────────────────────────────────────── */
.law-track-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 0 1 200px;
}
.law-oneline .law-track-info {
	flex: 0 1 160px;
	min-width: 0;
}

.law-track-title,
.law-oneline-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1.3;
}
.law-track-subtitle {
	font-size: 0.75rem;
	color: #888888;
	margin-top: 2px;
	line-height: 1.3;
}

/* ── Barre de progression ───────────────────────────────────────────────── */
.law-progress-wrap {
	flex: 1 1 60px;
	min-width: 40px;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 8px 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y; /* scroll vertical libre par défaut */
}

.law-progress-bar {
	width: 100%;
	height: 3px;
	background-color: #d0e8e8;
	border-radius: 100px;
	position: relative;
	transition: height 0.15s ease, background-color 0.15s ease;
}

.law-progress-wrap:hover .law-progress-bar,
.law-track:hover .law-progress-bar,
.law-oneline:hover .law-progress-bar {
	height: 5px;
}

.law-progress-fill {
	height: 100%;
	width: 0%;
	background-color: #3AAFA9;
	border-radius: 100px;
	transition: width 0.1s linear, background-color 0.15s ease;
	position: relative;
}

/* Poignée */
.law-progress-wrap:hover .law-progress-fill::after,
.law-track:hover .law-progress-fill::after,
.law-oneline:hover .law-progress-fill::after {
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-color: inherit;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff;
	border: 2px solid transparent;
	box-sizing: border-box;
}

/* ── Temps ──────────────────────────────────────────────────────────────── */
.law-time {
	font-size: 0.72rem;
	color: #1a1a1a;
	white-space: nowrap;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	min-width: 80px;
	text-align: right;
}

/* ── Volume popup (fixed, attaché au body) ──────────────────────────────── */
.law-volume-popup {
	display: none;
	position: fixed;
	background: #ffffff;
	border: none;
	border-radius: 12px;
	padding: 14px 8px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
	z-index: 99999;
	width: 36px;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: auto;
}
.law-volume-popup.is-visible { display: flex; }

/* Fleche pointant vers le bouton */
.law-volume-popup::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: #ffffff;
	filter: drop-shadow(1px 0 1px rgba(0,0,0,0.06));
}

/* ── Slider volume — synchronise avec la barre de progression ── */
.law-volume-slider {
	-webkit-appearance: none;
	appearance: none;
	writing-mode: vertical-lr;
	direction: rtl;
	width: 3px;          /* même largeur que la track */
	height: 80px;
	cursor: pointer;
	margin: 0 auto;
	padding: 0;
	display: block;
	background: var(--vol-track, #d0e8e8);
	border-radius: 100px;
	outline: none;
	border: none;
}

.law-volume-popup:hover .law-volume-slider,
.law-volume-slider:hover {
	width: 5px;
	background: var(--vol-track, #b8dede);
}

/* Thumb WebKit — disque centré sur la track */
.law-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--vol-fill, #3AAFA9);
	border: none;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	transition: transform 0.1s;
	/* Centre le thumb : décale de la moitié de (thumbSize - trackWidth) */
	margin-left: -3px;
}
.law-volume-slider:hover::-webkit-slider-thumb {
	transform: scale(1.3);
}

/* Thumb Firefox */
.law-volume-slider::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--vol-fill, #3AAFA9);
	border: none;
	box-shadow: none;
	cursor: pointer;
}

/* Supprime les pseudo-éléments track WebKit — on utilise le background du slider */
.law-volume-slider::-webkit-slider-runnable-track {
	background: transparent;
	border: none;
	box-shadow: none;
}
.law-volume-slider::-moz-range-track {
	background: transparent;
	border: none;
}
/* ── Marquee ────────────────────────────────────────────────────────────── */
.law-marquee-wrap {
	overflow: hidden;
	white-space: nowrap;
	cursor: default;
}
.law-marquee-inner {
	display: inline-block;
	white-space: nowrap;
}
.law-marquee-inner.is-scrolling {
	animation: law-marquee var(--law-dur, 3s) ease-in-out infinite alternate;
}
@keyframes law-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(var(--law-shift, 0px)); }
}

/* ── Message vide ───────────────────────────────────────────────────────── */
.law-empty {
	color: #888;
	font-style: italic;
	font-size: 0.875rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablette — masque le temps, réduit les infos */
@media (max-width: 768px) {
	.law-track-info { flex: 0 1 140px; }
	.law-time       { min-width: 70px; font-size: 0.65rem; }
}

/* Mobile — layout repensé en deux lignes */
@media (max-width: 520px) {

	/* ── Playlist : 2 lignes ──────────────────────────────── */
	.law-track {
		flex-wrap: wrap;
		gap: 6px 10px;
		padding: 10px 12px;
	}

	/* Ligne 1 : play + infos + volume */
	.law-btn-play   { order: 1; }
	.law-track-info { order: 2; flex: 1 1 0; min-width: 0; }
	.law-btn-volume { order: 3; }

	/* Ligne 2 : barre + temps (pleine largeur) */
	.law-progress-wrap {
		order: 4;
		flex: 1 1 100%;
		padding: 4px 0 2px;
	}
	.law-time {
		order: 5;
		min-width: auto;
		text-align: right;
		font-size: 0.65rem;
	}

	/* Sous-titre visible en mobile */
	.law-track-subtitle { display: block; }

	/* ── One Line : 2 lignes ─────────────────────────────── */
	.law-oneline {
		flex-wrap: wrap;
		gap: 6px 8px;
		padding: 10px 12px;
	}

	/* Ligne 1 : prev + play + infos + next + volume */
	.law-btn-prev        { order: 1; }
	.law-btn-play        { order: 2; }
	.law-oneline .law-track-info { order: 3; flex: 1 1 0; min-width: 0; }
	.law-btn-next        { order: 4; }
	.law-btn-volume      { order: 5; }

	/* Ligne 2 : barre + temps */
	.law-oneline .law-progress-wrap {
		order: 6;
		flex: 1 1 100%;
		padding: 4px 0 2px;
	}
	.law-oneline .law-time {
		order: 7;
		min-width: auto;
		font-size: 0.65rem;
	}

	/* Sous-titre visible en mobile */
	.law-oneline .law-track-subtitle { display: block; }
}

/* ── Mode Minimal (sans titres) ─────────────────────────────────────────── */
.law-playlist--minimal .law-track-info {
	display: none;
}
.law-track--minimal {
	gap: 10px;
}

/* Minimal reste toujours horizontal — override du responsive */
@media (max-width: 520px) {
	.law-track--minimal {
		flex-wrap: nowrap;
	}
	.law-track--minimal .law-btn-play  { order: unset; }
	.law-track--minimal .law-btn-volume { order: unset; }
	.law-track--minimal .law-progress-wrap {
		order: unset;
		flex: 1 1 60px;
		padding: 8px 0;
	}
	.law-track--minimal .law-time {
		order: unset;
		min-width: 70px;
		font-size: 0.65rem;
	}
}