/**
 * Bannières à fond vidéo — bouton « pause / lecture » (0.55.0).
 *
 * Dépend de tokens.css. Le bouton est posé par `CoverVideoToggle` (PHP) et
 * révélé par cover-video.js (`hidden` retiré) : tant que le script n'a pas
 * tourné, la règle `[hidden]` du navigateur le garde hors de l'écran.
 *
 * Positionné dans le bloc lui-même (`.wp-block-cover` est `position:
 * relative` dans le cœur), au-dessus du voile de couleur
 * (`.wp-block-cover__background`, `z-index: 1`) — sans quoi le voile
 * absorberait le clic.
 */
.nirmata-cover-toggle {
	position: absolute;
	right: 1.25rem;
	bottom: calc( 1.25rem + env( safe-area-inset-bottom, 0px ) );
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	margin: 0;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 50%;
	background: rgba( 18, 19, 26, 0.55 );
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nirmata-cover-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

/* Une icône à la fois : le script pose `is-paused` d'après l'état réel de la
 * vidéo (voir cover-video.js), la classe choisit le pictogramme. */
.nirmata-cover-toggle__play {
	display: none;
}

.nirmata-cover-toggle.is-paused .nirmata-cover-toggle__pause {
	display: none;
}

.nirmata-cover-toggle.is-paused .nirmata-cover-toggle__play {
	display: block;
	/* Le triangle paraît décentré dans son cercle : léger décalage optique. */
	margin-left: 0.15rem;
}

.nirmata-cover-toggle:hover {
	background: rgba( 18, 19, 26, 0.8 );
	border-color: rgba( 255, 255, 255, 0.7 );
}

/* Focus : jamais une boîte (invariant frontend) — la bague par défaut se
 * dessinerait après un clic à la souris et ne s'effacerait plus. Le focus
 * clavier se rend par la couleur du contour et du pictogramme. */
.nirmata-cover-toggle:focus,
.nirmata-cover-toggle:focus-visible {
	outline: none;
	box-shadow: none;
}

.nirmata-cover-toggle:focus-visible {
	border-color: var( --nirmata-secondary, #c99946 );
	color: var( --nirmata-secondary, #c99946 );
}

@media ( max-width: 600px ) {
	.nirmata-cover-toggle {
		right: 0.75rem;
		bottom: calc( 0.75rem + env( safe-area-inset-bottom, 0px ) );
	}
}