/* =========================
   VITESSE DE LECTURE

   Rangée posée sous chaque vidéo par VideoTool et
   VideoBeatTool. Elle sert dans les deux pages : l'éditeur
   (fond clair) et le panneau de détails (fond sombre). Les
   règles ici ne fixent donc que la forme ; la couleur du
   panneau sombre est reprise dans style.css, où le sélecteur
   #viewer a le dernier mot.
========================= */

.video-speed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;

	margin: 10px 0 0;
}

.video-speed-label {
	margin-right: 4px;

	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	opacity: 0.7;
}

.video-speed .speed-btn {
	/* 40px de large : atteignable au doigt, et les quatre
	   vitesses tiennent sur une ligne d'écran de téléphone */
	min-width: 46px;
	padding: 6px 10px;

	border: 1px solid var(--border-strong, rgba(148, 163, 184, 0.5));
	border-radius: 999px;

	background: transparent;
	color: inherit;

	font-family: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;

	cursor: pointer;

	transition: background 0.15s ease,
	            border-color 0.15s ease,
	            color 0.15s ease;
}

.video-speed .speed-btn:hover {
	background: rgba(37, 99, 235, 0.12);
	border-color: #2563eb;
}

.video-speed .speed-btn.active {
	background: #2563eb;
	border-color: #2563eb;
	color: #ffffff;
	font-weight: 700;
}