/**
 * ChoirSuite — Styles du lecteur audio multipiste.
 * Styles minimalistes et neutres, pensés pour hériter du thème Divi 5.
 * Toutes les classes sont préfixées .choirsuite-player-*.
 */

.choirsuite-player {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.4;
}

.choirsuite-player * {
	box-sizing: border-box;
}

.choirsuite-player-global-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1em;
}

.choirsuite-player-seekbar {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 1em;
}

.choirsuite-player-time-current,
.choirsuite-player-time-duration {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-size: 0.85em;
	color: rgba(0, 0, 0, 0.6);
	min-width: 2.8em;
}

.choirsuite-player-time-duration {
	text-align: right;
}

.choirsuite-player-seek,
.choirsuite-player-volume {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	accent-color: currentColor;
	cursor: pointer;
}

.choirsuite-player-seek {
	flex: 1 1 auto;
	width: 100%;
}

.choirsuite-player-volume {
	flex: 0 0 auto;
	width: 5em;
}

/* Rail de la piste : stylisé explicitement, le rendu par défaut du
   navigateur/OS étant souvent trop discret voire invisible selon les
   réglages système. */
.choirsuite-player-seek::-webkit-slider-runnable-track,
.choirsuite-player-volume::-webkit-slider-runnable-track {
	height: 4px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}

.choirsuite-player-seek::-moz-range-track,
.choirsuite-player-volume::-moz-range-track {
	height: 4px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}

.choirsuite-player-seek::-webkit-slider-thumb,
.choirsuite-player-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border-radius: 50%;
	background: currentColor;
	cursor: pointer;
}

.choirsuite-player-seek::-moz-range-thumb,
.choirsuite-player-volume::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: currentColor;
	cursor: pointer;
}

.choirsuite-player-tracks {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.choirsuite-player-tracks::marker {
	content: none;
}

.choirsuite-player-track {
	list-style: none !important;
}

.choirsuite-player-track::marker {
	content: none;
}

.choirsuite-player-track {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.6em 0.9em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
}

.choirsuite-player-track-empty {
	opacity: 0.5;
}

.choirsuite-player-audio {
	display: none;
}

.choirsuite-player-label {
	flex: 1 1 auto;
	font-weight: 600;
}

.choirsuite-player-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	border-radius: 4px;
	padding: 0.4em 0.8em;
	line-height: 1;
	font-size: 0.95em;
}

.choirsuite-player-btn:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.05);
}

.choirsuite-player-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.choirsuite-player-btn-toggle-mute {
	flex: 0 0 auto;
	width: 2.4em;
	height: 2.4em;
	padding: 0;
}

/* Le bouton Lecture/Pause change de forme selon son état : large avec
   texte tant qu'il s'agit de "Charger les pistes"/"Lire" (les deux clics
   distincts nécessaires au tout premier lancement, voir choirsuite-player.js)
   pour ne jamais laisser croire qu'un simple carré icône suffit à
   comprendre l'action ; carré icône seul une fois passé ce cap (lecture/
   pause classique), comme les autres boutons icône du lecteur. */
.choirsuite-player-btn-toggle-play-pause {
	flex: 0 0 auto;
	padding: 0.4em 0.8em;
}

/* :not([hidden]) est indispensable ici : sans lui, cette règle (plus
   spécifique que le [hidden]{display:none} par défaut du navigateur)
   l'emporterait et afficherait les 4 blocs d'état en même temps, quel que
   soit celui réellement actif. */
.choirsuite-player-btn-toggle-play-pause [data-state-block]:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.choirsuite-player-btn-toggle-play-pause[data-state="playing"],
.choirsuite-player-btn-toggle-play-pause[data-state="paused"] {
	width: 2.4em;
	height: 2.4em;
	padding: 0;
}

.choirsuite-player-btn[aria-pressed="true"] {
	background: rgba(0, 0, 0, 0.1);
}

/* Code couleur du bouton Solo : au repos il suit le style neutre commun à
   tous les boutons du lecteur ; actif, il se distingue nettement (couleur
   d'accent du site) pour repérer en un coup d'œil quelle piste est isolée. */
.choirsuite-player-btn-toggle-solo {
	flex: 0 0 auto;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.3em 0.7em;
}

.choirsuite-player-btn-toggle-solo[aria-pressed="true"] {
	background: #1c8577;
	border-color: #1c8577;
	color: #fff;
}

/* Survol du Solo actif : bordure + texte rouges (plutôt que le survol gris
   générique du bouton, dont le fond quasi blanc rendrait le texte illisible
   ici) — signale visuellement "clic pour désactiver", distinct du vert
   "actif". Sélecteur volontairement plus spécifique que le :hover générique
   ci-dessus (.choirsuite-player-btn:hover), pour être sûr de l'emporter. */
.choirsuite-player-btn-toggle-solo[aria-pressed="true"]:hover:not(:disabled) {
	background: #fff;
	border-color: #b32d2e;
	color: #b32d2e;
}

.choirsuite-player-loading-indicator {
	display: none;
	align-items: center;
	gap: 0.5em;
	font-style: italic;
	color: rgba(0, 0, 0, 0.6);
}

.choirsuite-player-loading-indicator.is-visible {
	display: inline-flex;
}

.choirsuite-player-spinner {
	width: 1em;
	height: 1em;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: choirsuite-player-spin 0.8s linear infinite;
}

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

.choirsuite-player-restricted,
.choirsuite-player-empty {
	padding: 1em;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	text-align: center;
}

.choirsuite-score-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	text-decoration: none;
}

.choirsuite-score-link:hover {
	background: rgba(0, 0, 0, 0.05);
}