/* -----------------------------------------------------------------------------
 * Composants partagés : bouton, titres de page, section « stack »
 *
 * Chargés sur tout le site et dans l'éditeur (inc/enqueue.php) : utilisés par les stacks,
 * les singles, les gabarits des extensions Reactif et le contenu des pages.
 * -------------------------------------------------------------------------- */

/* Bouton --------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--18);
	border: 2px solid var(--wp--preset--color--rouge-rubis, #B20B33);
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--rouge-rubis);
	color: var(--wp--preset--color--light);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;

	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--cafe);
		outline-offset: 3px;
	}

	&:hover {
		background-color: hsl(from var(--wp--preset--color--rouge-rubis, #B20B33) h s l / 0.7);
	}

	@media (max-width: 767px) {
		white-space: normal;
	}
}

.button--orange {
	border-color: var(--wp--preset--color--orange, #F4610F);
	background-color: var(--wp--preset--color--orange, #F4610F);

	&:is(:hover, :focus) {
		background-color: hsl(from var(--wp--preset--color--orange, #F4610F) h s l / 0.8);
	}
}

.button--teal {
	border-color: var(--wp--preset--color--administration, #00B2A9);
	background-color: var(--wp--preset--color--administration, #00B2A9);

	&:is(:hover, :focus) {
		background-color: hsl(from var(--wp--preset--color--administration, #00B2A9) h s l / 0.8);
	}
}

/* Titres de page ------------------------------------------------------------- */

.page-title {
	margin-bottom: var(--wp--preset--spacing--xl);
	font-size: var(--wp--preset--font-size--step-5);

	@media (max-width: 1024px) {
		font-size: var(--wp--preset--font-size--step-4);
	}
}

.page-title-2 {
	margin-bottom: var(--wp--preset--spacing--xl);
	font-size: var(--wp--preset--font-size--step-3);
	text-align: center;

	@media (max-width: 1024px) {
		margin-bottom: var(--wp--preset--spacing--l);
	}

	@media (max-width: 767px) {
		font-size: var(--wp--preset--font-size--step-2);
	}
}

/* Section de page (stacks, rangées des singles) ------------------------------ */

.stack {
	position: relative;
	margin-top: var(--wp--preset--spacing--5-xl);
	margin-bottom: var(--wp--preset--spacing--5-xl);

	@media (max-width: 1024px) {
		margin-top: var(--wp--preset--spacing--4-xl);
		margin-bottom: var(--wp--preset--spacing--4-xl);
	}
}