/* ==========================================================================
   Bouton lecture / pause des vidéos en lecture automatique (ajouté par videos.js).
   Discret : rond blanc translucide en bas à droite, plus visible au survol de la vidéo.
   ========================================================================== */

.video-bouton {
	position: absolute;
	right: var(--space-s);
	bottom: var(--space-s);
	z-index: var(--z-base);
	display: grid;
	place-items: center;
	width: var(--video-bouton);
	height: var(--video-bouton);
	border-radius: 50%;
	background: rgb(255 255 255 / 0.7);
	color: var(--c-black);
	opacity: 0.6;
	transition: opacity var(--t-hover), background var(--t-hover);

	.wp-block-video:hover &,
	&:focus-visible {
		opacity: 1;
		background: var(--c-white);
	}
}

/* Icône « lecture » : triangle ; « pause » : deux barres. */
.video-bouton__icone {
	width: 0;
	height: 0;
	margin-left: var(--video-lecture-optique);
	border-block: var(--video-lecture-h) solid transparent;
	border-left: var(--video-lecture-l) solid currentColor;
}

.video-bouton--lecture .video-bouton__icone {
	width: var(--video-pause-w);
	height: var(--video-pause-h);
	margin-left: 0;
	border: 0;
	border-inline: var(--video-pause-barre) solid currentColor;
}