/**
 * vefm-random-player.css
 *
 * Barre compacte et discrète — pensée pour être posée sur une page
 * galerie photos sans distraire du contenu visuel. Hérite des variables
 * globales du site (--vefm-accent, --vefm-font-family) comme le reste de
 * VEFmusic, ne fixe aucune couleur de marque en dur.
 */

/* Point 1 suite — Divi 5 (demande Eric, 10/09/2026) : voir le même
   commentaire dans vefm-frontend.css — le contrôle natif "Rayon de
   bordure" de Divi 5 a besoin d’un overflow:hidden sur le wrapper du
   module pour produire un effet visuel réel. */
.et_pb_module.vefm_divi_random_player {
	overflow: hidden;
}

/*
 * v2.10.7 (alignement cassé signalé par Paul sur un vrai site — la
 * tentative v2.10.0 ci-dessous forçait ce conteneur à occuper toute la
 * largeur disponible, avec ses contrôles collés à gauche : correct sur
 * mobile, mais laissait une grande zone de fond vide à droite sur
 * desktop/tablette, jamais repéré car jamais testé sur une vraie page
 * de contenu avant livraison — seulement en isolation). Retour à UNE
 * SEULE boîte (suppression du wrapper interne devenu inutile) en
 * inline-flex + max-width:100% : épouse son contenu tant qu’il tient
 * dans la largeur disponible (comportement d’origine, correct) ET se
 * fait forcer à 100% de cette largeur SEULEMENT quand le contenu ne
 * tient plus — c’est cette contrainte, pas un display:flex permanent,
 * qui doit déclencher flex-wrap. text-align:center recentre le titre
 * quand il passe sur plusieurs lignes une fois effectivement contraint.
 * padding réutilise --vefm-track-padding (déjà documentée dans l’Aide
 * pour Tracks/Album), pour rester cohérent avec ces deux blocs si un
 * site en a personnalisé la valeur.
 *
 * v2.10.11 (retour Paul, bêta-testeur — Gutenberg) : malgré le
 * inline-flex ci-dessus, un thème/contexte Gutenberg précis pouvait
 * encore réimposer une largeur 100% sur ce conteneur (cause exacte non
 * isolée sans accès au site concerné — ce bloc ne déclare aucun
 * support align/layout qui l’expliquerait de lui-même côté VEFmusic).
 * `width: fit-content` rend le comportement voulu explicite sur CE
 * sélecteur précis, donc protégé même si une règle de thème plus
 * générale vise à nouveau cet élément.
 */
.vefm-random-player {
	/* v2.10.12 (retour Paul, bêta-testeur) : passage en display:flex —
	   sans effet visuel notable avec width:fit-content déjà en place
	   (2.10.11), simple préférence de Paul, aucun conflit connu. */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: fit-content;
	max-width: 100%;
	text-align: center;
	gap: 0.857em;
	padding: var( --vefm-track-padding, 0.714em 1.143em );
	/* Point 1 (demande Eric, 10/09/2026) : angles arrondis du bloc
	   lui-même — repli à 3em (forme pastille existante, INCHANGÉE par
	   défaut) plutôt que 0, contrairement aux autres blocs : ce
	   3em est un choix de design volontaire déjà en place (voir
	   commentaire v2.10.12 plus bas dans ce fichier), jamais un simple
	   défaut technique à écraser silencieusement. */
	border-radius: var( --vefm-block-radius, 3em );
	background: var( --vefm-track-bg, rgba(0, 0, 0, 0.08) );
	/* Retour Paul (10/09/2026) : aucun réglage de couleur de texte
	   propre au Lecteur aléatoire — réutilise --vefm-track-text comme
	   le fond/padding ci-dessus, pour qu’un webmaster ayant personnalisé
	   la couleur de texte des Pistes voie ce choix suivi ici aussi
	   (voir aussi l’onglet Aide, section Style). */
	color: var( --vefm-track-text, inherit );
	font-family: var( --vefm-font-family, inherit );
	/* v2.10.10 (retour Paul, bêta-testeur) : font-size fixe en px ne
	   suivait jamais la taille de police réelle du thème/du contexte où
	   le bloc est posé — bouton, icônes et curseur de volume gardaient
	   TOUJOURS la même taille en pixels quel que soit le site, look
	   figé/"skin" façon vieux lecteur de bureau plutôt qu’un composant
	   qui s’intègre au design ambiant. Passé en em (relatif à la police
	   héritée du contexte) : tout le bloc ci-dessous (boutons, icônes,
	   curseur) est maintenant exprimé en em de CE font-size, donc scale
	   ensemble avec lui. 0.875em ≈ 14px sur une base théorique de 16px
	   (taille par défaut la plus courante), pour rester visuellement
	   identique aux sites qui n’ont rien de particulier, tout en
	   suivant désormais un site qui personnalise sa taille de police
	   de base. */
	font-size: 0.875em;
}

.vefm-rp-toggle,
.vefm-rp-stop {
	border: none;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	color: #fff;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1;
}

.vefm-rp-toggle {
	width: 2.286em;
	height: 2.286em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
}

.vefm-rp-icon-play::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.429em 0 0.429em 0.714em;
	border-color: transparent transparent transparent #fff;
	margin-left: 0.143em;
}

.vefm-rp-icon-pause::before {
	content: "";
	display: block;
	width: 0.714em;
	height: 0.857em;
	background: linear-gradient( to right, #fff 0.214em, transparent 0.214em 0.5em, #fff 0.5em );
}

.vefm-rp-title {
	opacity: 0.85;
	white-space: normal;
}

.vefm-rp-stop {
	padding: .5em;
	font-size: 0.857em;
	opacity: 0.75;
}

.vefm-rp-stop:hover {
	opacity: 1;
}

.vefm-rp-autoplay-notice {
	flex-basis: 100%;
	margin: 0.286em 0 0;
	font-size: 0.857em;
	opacity: 0.75;
}

/**
 * Contrôle de volume (v1.0.5) — visuellement proche de .vefm-track-volume
 * (blocks/track-list/track-row.php + vefm-frontend.css) mais dupliqué ici
 * avec ses propres classes vefm-rp-* : fichier volontairement autonome
 * (voir docblock en tête de fichier), jamais chargé en même temps que
 * vefm-frontend-style par nécessité. Toujours visible ici (pas de
 * révélation au survol comme sur une ligne de morceau) : c’est le SEUL
 * contrôle de son de ce bloc, il ne peut pas être caché par défaut.
 */
.vefm-rp-volume {
	display: flex;
	align-items: center;
	gap: 0.429em;
}

.vefm-rp-volume-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	opacity: 0.8;
	display: flex;
	align-items: center;
	padding: 0;
	flex: 0 0 auto;
}

.vefm-rp-volume-toggle:hover {
	opacity: 1;
}

/* v2.11.2 (retour Eric) : l’ancienne pulsation "cliquez pour activer
   le son" (.vefm-rp-pulse) a été retirée — l’icône affiche désormais
   "son activé" en permanence dès le premier rendu, plus de coupure
   initiale à signaler visuellement (voir vefm-random-player.js). */

.vefm-rp-icon-svg {
	width: 1.143em;
	height: 1.143em;
	fill: currentColor;
}

.vefm-rp-volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 4.571em;
	height: 0.286em;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.15);
	outline: none;
	cursor: pointer;
	margin: 0;
}

/* Accessibilité clavier (v1.2.1) — voir même commentaire dans
   vefm-frontend.css : outline:none ci-dessus a besoin d’un remplacement
   explicite, sinon le curseur devient invisible au clavier. */
.vefm-rp-volume-slider:focus-visible {
	outline: 2px solid var( --vefm-accent, var( --wp--preset--color--primary, #ffffff ) );
	outline-offset: 2px;
}

.vefm-rp-volume-slider::-webkit-slider-runnable-track {
	height: 0.286em;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.15);
}

.vefm-rp-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 0.857em;
	height: 0.857em;
	margin-top: -0.286em;
	border-radius: 50%;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.vefm-rp-volume-slider::-moz-range-track {
	height: 0.286em;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.15);
}

.vefm-rp-volume-slider::-moz-range-thumb {
	width: 0.714em;
	height: 0.714em;
	border-radius: 50%;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

/* Texte masqué visuellement, disponible pour les lecteurs d’écran
   (v2.3.11 — correctif accessibilité) : utilisé sur .vefm-rp-title
   quand l’admin a désactivé son affichage visuel (showTrackTitle),
   pour que le changement de piste reste annoncé via aria-live malgré
   tout. Même technique que vefm-frontend.css/vefm-ratings.css
   (.vefm-sr-only), dupliquée ici volontairement : ce fichier CSS reste
   indépendant, jamais chargé en fonction d’un autre (voir docblock en
   tête de fichier). */
.vefm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}