/*
 * Page d'une branche (vm_branche) : le bandeau d'en-tête est teinté par la couleur
 * de marque de la branche, posée en variable --vm-band sur la page par
 * functions.php à partir de la donnée. Feuille chargée uniquement sur ces pages.
 */

/*
 * Bandeau : un simple liseré de la couleur de la branche en haut, sur le fond de
 * page. L'accent reste discret ; la couleur revient dans le filet du titre et la
 * devise. Surface claire : le texte reste à l'encre.
 */
.vm-branche-hero {
	border-top: 6px solid var(--vm-band, var(--vm-green));
	text-align: center;
	padding-top: 58px;
	padding-bottom: 40px;
}

/* Sur-titre « membres · âge » : teinte appuyée de la couleur de la branche. */
.vm-branche-kick {
	color: color-mix(in srgb, var(--vm-band, var(--vm-green)) 70%, var(--vm-ink));
}

/*
 * Filet manuscrit sous le titre, aux couleurs de la branche : le même tracé que
 * celui de style.css, servi en masque pour teinter le trait par la donnée.
 */
.vm-branche-hero h1::after {
	content: "";
	display: block;
	width: 132px;
	height: 12px;
	margin: 14px auto 0;
	background: color-mix(in srgb, var(--vm-band, var(--vm-amber)) 72%, var(--vm-ink));
	-webkit-mask: no-repeat center / contain
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 12"><path d="M3 8c22-6 46-6 63-4 18 2 40 4 63-2" fill="none" stroke="%23000" stroke-width="3.5" stroke-linecap="round"/></svg>');
	mask: no-repeat center / contain
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 12"><path d="M3 8c22-6 46-6 63-4 18 2 40 4 63-2" fill="none" stroke="%23000" stroke-width="3.5" stroke-linecap="round"/></svg>');
}

/* Devise : accent manuscrit teinté, entre guillemets (présentation, pas donnée). */
.vm-branche-devise {
	font-family: 'Indie Flower', cursive;
	font-size: 30px;
	line-height: 1.25;
	color: color-mix(in srgb, var(--vm-band, var(--vm-green)) 62%, var(--vm-ink));
	margin-top: 8px;
}

.vm-branche-devise::before {
	content: "« ";
}

.vm-branche-devise::after {
	content: " »";
}

/* Liaisons vides (devise ou sous-titre non renseignés) : rien à afficher, et pas
   de guillemets orphelins. */
.vm-branche-devise:empty,
.vm-branche-kick:empty {
	display: none;
}

@media (max-width: 781px) {
	.vm-branche-hero {
		padding-top: 40px;
		padding-bottom: 30px;
	}

	.vm-branche-devise {
		font-size: 24px;
	}
}