/*
======================================================================
Much Ado
Buttons
======================================================================
*/

.button,
.wp-block-button__link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:.5rem;
	padding:.9rem 1.8rem;
	border:2px solid transparent;
	border-radius:var(--radius-round);
	font-size:var(--fs-sm);
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	text-decoration:none;
	cursor:pointer;
	transition:
		background var(--transition),
		color var(--transition),
		border-color var(--transition),
		transform var(--transition),
		box-shadow var(--transition);
	word-break: keep-all;      /* ne coupe jamais un mot */
	overflow-wrap: normal;
}

.button--primary,
.wp-block-button.is-style-fill .wp-block-button__link{
	/*
	| --color-primary est doré (couleur claire) : du texte blanc dessus ne
	| respecte pas un contraste suffisant. --color-primary-text est prévue
	| pour ça, plutôt qu'un blanc en dur qui redeviendrait illisible si la
	| couleur primaire change un jour.
	*/
	color:var(--color-primary-text);
	background:var(--color-primary);
	border-color:var(--color-primary);
}

.button--primary:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover{
	color:var(--color-primary-text);
	background:color-mix(in srgb,var(--color-primary) 85%,black);
	border-color:color-mix(in srgb,var(--color-primary) 85%,black);
	transform:translateY(-2px);
	box-shadow:var(--shadow);
}

.button--secondary{
	color:var(--color-crown);
	background:var(--color-redlogo);
	border-color:var(--color-redlogo);
}

.button--secondary:hover{
	background:transparent;
	border-color:var(--color-redlogo);
	color:var(--color-white);
	transform:translateY(-2px);
}

.button--outline{
	color:var(--color-textdarker);
	background:transparent;
	border-color:currentColor;
}

.button--outline:hover{
	color:var(--color-white);
	background:var(--color-textdarker);
	border-color:var(--color-textdarker);
}

.button--light{
	color:var(--color-textdarker);
	background:var(--color-white);
	border-color:var(--color-white);
}

.button--light:hover{
	background:transparent;
	color:var(--color-white);
}

.button:disabled,
.button.disabled{
	opacity:.5;
	cursor:not-allowed;
	pointer-events:none;
}
/* =====================================================
   Tablet
===================================================== */

@media (max-width:1024px){

	.button,
	.wp-block-button__link{
		min-height:54px;
		padding:0 1.8rem;
		letter-spacing:.04em;
	}

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

	.button,
	.wp-block-button__link{
		min-height:54px;
		padding:0 1.6rem;
		letter-spacing:.03em;
	}

}


/* =====================================================
   Small phones
===================================================== */

@media (max-width:480px){

	.button,
	.wp-block-button__link{
		min-height:52px;
		padding:0 1.4rem;
	}

}