/**
 * L'image d'accueil.
 *
 * Le bloc `essential-blocks/advanced-image` qu'on remplace apportait deux
 * choses visibles : des coins arrondis de 3 px et un zoom à l'apparition. Le
 * reste de son balisage — quatre `<div>` imbriquées autour d'un `<img>` — ne
 * servait qu'à porter des réglages qu'on n'utilise pas. On garde donc l'effet,
 * pas la charpente.
 */

.bb-image-accueil {
	margin: 0;
}

/* `width: 100%` reproduit le rendu du bloc, qui occupait toute la largeur de
   son conteneur. `height: auto` neutralise les attributs `width`/`height` que
   `wp_get_attachment_image()` pose sur la balise — ils sont là pour que le
   navigateur réserve la place et n'a pas à imposer la taille. */
.bb-image-accueil__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

/* Le `zoomIn` d'Animate.css, dont Essential Blocks reprend la définition, joué
   sur une seconde — la durée qui était réglée dans le bloc. */
@keyframes bb-image-accueil-zoom {
	from {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}

.bb-image-accueil__img {
	animation: bb-image-accueil-zoom 1s both;
}

/* Une animation qui part d'un facteur 0,3 est exactement ce que ce réglage
   système demande d'éviter. L'image apparaît alors sans détour — ce que le
   bloc remplacé, lui, ne savait pas faire. */
@media (prefers-reduced-motion: reduce) {
	.bb-image-accueil__img {
		animation: none;
	}
}