/*
 * Torque — apparence des aperçus d'intégrations.
 *
 * L'iframe conserve sa place et ses dimensions : c'est ce qui évite tout
 * décalage de mise en page au moment où le lecteur se charge.
 */

iframe.torque-facade {
	/* L'aperçu remplace une vidéo dont le thème a fixé la boîte. Hériter d'un
	   modèle de boîte différent de celui de l'élément remplacé décalerait la
	   mise en page au chargement — précisément ce que cette façade existe pour
	   éviter. */
	box-sizing: border-box;
	background-color: #000;
	border: 0;
	cursor: pointer;
	position: relative;
}

/*
 * Une iframe ne peut pas porter de pseudo-élément : le bouton de lecture est
 * donc dessiné en SVG dans l'image de fond, superposée à la vignette.
 */
iframe.torque-facade {
	background-blend-mode: normal;
}

iframe.torque-facade:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	iframe.torque-facade {
		transition: filter .15s ease;
	}

	iframe.torque-facade:hover {
		filter: brightness(1.08);
	}
}