/**
 * KajaCorée — Lecteur audio amélioré (V1)
 * Style « épuré clair » : carte blanche, ombre douce, pistes fines arrondies
 * remplies en bleu (la portion écoulée est peinte en JS via un dégradé), curseurs
 * ronds blancs cerclés d'accent. Auto-suffisant : fonctionne dans le layout
 * "default" (podcasts) comme dans "kajaschool" (exercices). Pas de Shadow DOM.
 */

.kaja-player {
	--kaja-accent: #78a7ff;       /* bleu KajaCorée */
	--kaja-accent-strong: #5b8def;
	--kaja-track: #e6ebf5;        /* piste non remplie */
	--kaja-card: #ffffff;
	--kaja-border: #e7ecf5;
	--kaja-text: #2c3340;
	--kaja-muted: #8a93a6;
	--kaja-pill-bg: #f5f7fb;
	--kaja-track-h: 6px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 18px auto;
	padding: 16px 18px;
	background: var(--kaja-card);
	border: 1px solid var(--kaja-border);
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba( 24, 39, 75, 0.06 );
	color: var(--kaja-text);
	font-family: inherit;
	outline: none;
}

.kaja-player *,
.kaja-player *::before,
.kaja-player *::after {
	box-sizing: border-box;
}

.kaja-player:focus-visible {
	box-shadow: 0 0 0 3px rgba( 120, 167, 255, 0.40 ), 0 2px 14px rgba( 24, 39, 75, 0.06 );
}

.kaja-player__title {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 14px;
	line-height: 1.35;
}

.kaja-player__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
}

.kaja-player__row + .kaja-player__row {
	margin-top: 13px;
}

/* Transport : lecture centrée, encadrée par les sauts (groupe symétrique). */
.kaja-player__row--transport {
	justify-content: center;
	gap: 11px;
}

/* Progression : la barre occupe toute la largeur restante. */
.kaja-player__row--progress {
	gap: 11px;
}

/* --- Play / pause --- */
.kaja-player__play {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--kaja-accent);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba( 120, 167, 255, 0.45 );
	transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.kaja-player__play:hover {
	background: var(--kaja-accent-strong);
}

.kaja-player__play:active {
	transform: scale( 0.94 );
}

.kaja-player__play svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	display: block;
}

/* --- Temps --- */
.kaja-player__time {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--kaja-muted);
	min-width: 36px;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Sliders (barre de progression + vitesse)                           */
/* La portion remplie est un dégradé posé en JS sur le fond de l'input */
/* (band de --kaja-track-h centré). Les pistes natives sont neutralisées.*/
/* ------------------------------------------------------------------ */
.kaja-player__seek,
.kaja-player__speed-slider {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 16px;
	margin: 0;
	cursor: pointer;
	background:
		linear-gradient( var(--kaja-track), var(--kaja-track) )
		no-repeat center / 100% var(--kaja-track-h);
	border-radius: 999px;
}

.kaja-player__seek { flex: 1 1 130px; min-width: 100px; }
.kaja-player__speed-slider { flex: 1 1 110px; min-width: 90px; }

/* Webkit : on rend la piste transparente (le fond de l'input fait office de piste) */
.kaja-player__seek::-webkit-slider-runnable-track,
.kaja-player__speed-slider::-webkit-slider-runnable-track {
	height: var(--kaja-track-h);
	background: transparent;
	border: none;
	border-radius: 999px;
}

.kaja-player__seek::-moz-range-track,
.kaja-player__speed-slider::-moz-range-track {
	height: var(--kaja-track-h);
	background: transparent;
	border: none;
	border-radius: 999px;
}

.kaja-player__seek::-moz-range-progress,
.kaja-player__speed-slider::-moz-range-progress {
	background: transparent; /* la portion remplie vient du fond de l'input */
}

/* Curseur : pastille blanche cerclée d'accent */
.kaja-player__seek::-webkit-slider-thumb,
.kaja-player__speed-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin-top: calc( ( var(--kaja-track-h) - 15px ) / 2 ); /* centre sur la piste */
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--kaja-accent);
	box-shadow: 0 1px 4px rgba( 24, 39, 75, 0.25 );
	cursor: pointer;
	transition: transform 0.1s ease;
}

.kaja-player__seek::-moz-range-thumb,
.kaja-player__speed-slider::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--kaja-accent);
	box-shadow: 0 1px 4px rgba( 24, 39, 75, 0.25 );
	cursor: pointer;
}

.kaja-player__seek:active::-webkit-slider-thumb,
.kaja-player__speed-slider:active::-webkit-slider-thumb {
	transform: scale( 1.15 );
}

/* --- Sauts & boutons rapides (pastilles) --- */
.kaja-player__skip,
.kaja-player__quick {
	flex: 0 0 auto;
	border: 1px solid var(--kaja-border);
	background: var(--kaja-pill-bg);
	color: var(--kaja-text);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kaja-player__skip {
	padding: 6px 13px;
	border-radius: 18px;
	font-size: 13px;
}

.kaja-player__quick {
	padding: 5px 11px;
	border-radius: 16px;
	font-size: 12px;
}

.kaja-player__skip:hover,
.kaja-player__quick:hover {
	border-color: var(--kaja-accent);
	color: var(--kaja-accent-strong);
}

.kaja-player__quick.is-active {
	background: var(--kaja-accent);
	border-color: var(--kaja-accent);
	color: #fff;
}

/* --- Vitesse --- */
.kaja-player__speed-label {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kaja-muted);
	margin-right: 2px;
}

.kaja-player__speed-badge {
	flex: 0 0 auto;
	min-width: 46px;
	text-align: center;
	padding: 4px 9px;
	border-radius: 13px;
	background: var(--kaja-accent);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Mobile --- */
@media ( max-width: 575px ) {
	.kaja-player {
		padding: 13px;
	}
	/* La vitesse passe sur sa propre ligne, centrée, pour rester lisible. */
	.kaja-player__row--speed {
		justify-content: center;
	}
	.kaja-player__speed-label {
		flex-basis: 100%;
		text-align: center;
	}
	.kaja-player__speed-slider {
		flex-basis: 100%;
	}
}

/* --- Mode sombre KajaSchool (body.dark-mode) --- */
body.dark-mode .kaja-player {
	--kaja-track: #3a4150;
	--kaja-card: #2a2f3a;
	--kaja-border: #3a4150;
	--kaja-text: #e6e9ef;
	--kaja-muted: #9aa3b3;
	--kaja-pill-bg: #1f2430;
	box-shadow: none;
}