/*
 * Composants propres à la page d'accueil (patterns hero, polaroids, présentation
 * et chiffres, branches, galerie, contacts). Feuille chargée uniquement sur la
 * page d'accueil (voir functions.php). Les variables --vm-* viennent de style.css.
 */

/* Hero : emblème, nom et devise manuscrits, accroche, photos polaroid. */
.vm-hero {
	text-align: center;
}

/* Emblème : bloc image core, recentré et dimensionné par le thème. */
.vm-embleme {
	display: block;
	margin: 0 auto 12px;
}

.vm-embleme img {
	height: 140px;
	width: auto;
	margin: 0 auto;
	display: block;
}

.vm-brandname {
	font-family: 'Indie Flower', cursive;
	font-size: 46px;
	line-height: 1.04;
	/* Bleu de marque dérivé du « Ciel » de la palette, assombri pour la lisibilité. */
	color: color-mix(in srgb, var(--vm-cool) 80%, var(--vm-ink));
	margin: 0;
}

.vm-brandmotto {
	font-family: 'Indie Flower', cursive;
	font-size: 27px;
	color: var(--vm-terra);
	margin: 2px 0 0;
}

.vm-lead {
	font-size: var(--vm-text-lead);
	color: var(--vm-ctx-muted, var(--vm-muted));
	max-width: 56ch;
	margin: 26px auto;
}

.vm-polaroids {
	display: flex;
	gap: 24px;
	justify-content: center;
	flex-wrap: wrap;
}

/*
 * Style de bloc « Polaroid » (enregistré dans functions.php) : habille un bloc
 * image core en photo encadrée avec légende manuscrite. Contenu éditable ; seule
 * la présentation vient d'ici.
 */
.is-style-vm-polaroid {
	background: var(--vm-ctx-card, var(--vm-paper));
	border: 1px solid var(--vm-ctx-card-border, var(--vm-line));
	border-radius: 6px;
	padding: 10px 10px 6px;
	margin: 0;
	max-width: 242px;
}

.is-style-vm-polaroid img {
	display: block;
	width: 220px;
	height: 158px;
	object-fit: cover;
	border-radius: 3px;
	/* Fond d'attente (avant chargement de l'image), dérivé de la palette. */
	background: color-mix(in srgb, var(--vm-sand) 55%, var(--vm-line));
}

.is-style-vm-polaroid figcaption {
	font-family: 'Indie Flower', cursive;
	text-align: center;
	font-size: 19px;
	margin: 6px 0 0;
	color: var(--vm-ctx-on-card, var(--vm-ink));
}

/* Légère rotation alternée, façon photos posées. */
.vm-polaroids > .wp-block-image:nth-child(1) {
	transform: rotate(-3deg);
}

.vm-polaroids > .wp-block-image:nth-child(2) {
	transform: rotate(2deg);
}

.vm-polaroids > .wp-block-image:nth-child(3) {
	transform: rotate(-1.5deg);
}

/* Présentation. */
.vm-intro-txt {
	font-size: var(--vm-text-lead);
	color: var(--vm-ctx-muted, var(--vm-muted));
	max-width: 64ch;
	margin: 0 auto 30px;
}

/*
 * Galerie : bloc core/gallery natif (le rédacteur ajoute et retire ses photos).
 * Le thème ne fait qu'arrondir les angles et resserrer la gouttière.
 */
.vm-gallery {
	gap: 10px;
	margin-top: 26px;
}

.vm-gallery .wp-block-image img {
	border-radius: 10px;
}

@media (max-width: 860px) {
	.vm-brandname {
		font-size: 34px;
	}

	.vm-brandmotto {
		font-size: 21px;
	}
}