/* .............................................................................
BUTTONS
............................................................................. */

/*
BUTTON / Standard
Bouton standard du site.
Voir dans titles.css car c'est le meme font-size que .fsCs */
button.btn,
a.btn {--stroke-color:var(--color-orange);appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 700;line-height: 1.2;color: var(--color-orange);padding: 0 2em;text-transform: uppercase;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;box-shadow: inset 0 0 0 1px var(--stroke-color);transition: color 0.3s;}
.btn::before {position: absolute;z-index: 0;display: block;content:" ";background-color: var(--color-orange);top: 0;bottom: 0;left: 0;right: 0;transform-origin: 0% 100%;transform: scaleY(0);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 0.9em 0;}
.btn__icon {font-size: 1.2em;z-index: 1;display: block;flex: 0 0 auto;padding: 0;margin-left: -0.2em;}
.btn__label + .btn__icon {margin-left: 0; margin-right: -0.2em;;}

	/* Spacing entre le label et l'icone. */
	.btn > * + * {padding-left: 0.5em;}

	/* Pour que le target dans event delegation soit le button au lieu du contenu a l'interieur. */
	.btn * {pointer-events: none;}

	/* Hover */
	.btn:hover:not(:disabled):not(.disabled) {color:#fff; }
	.btn:hover:not(:disabled):not(.disabled)::before {transform: scaleY(0.999);}

	/* Disabled */
	.btn:disabled,
	.btn.disabled {opacity: 0.25;cursor: not-allowed;pointer-events: none;}

	/* 
	ALT :
	Filled. */
	button.btn--filled,
	a.btn--filled {background-color: var(--color-orange);color: #fff;box-shadow: none;}
	.btn--filled::before {background-color: var(--color-black); }

	/* 
	ALT :
	Light, gray. */
	button.btn--light,
	a.btn--light {--stroke-color: var(--color-gray); color: var(--color-gray);}
	.btn--light::before {background-color: var(--color-gray); }

	/* 
	ALT :
	Light, gray and filled. */
	button.btn--lightFilled,
	a.btn--lightFilled {background-color: var(--color-gray);color: #fff;box-shadow: none;}
	.btn--lightFilled::before {background-color: var(--color-black); }

	/* 
	ALT :
	Delete button. */
	button.btn--delete,
	a.btn--delete {--stroke-color: var(--color-red);color: var(--color-red);}
	.btn--delete::before {background-color: var(--color-red); }

	/* 
	ALT :
	Subtle button, pour les boutons cancel. */
	button.btn--subtle,
	a.btn--subtle {--stroke-color: transparent; color: var(--color-gray);}
	.btn--subtle::before {background-color: var(--color-gray); }

	/* 
	ALT :
	In list, like a table or an accordion. */
	button.btn--inList,
	a.btn--inList {padding: 0 1em; }
	.btn--inList .btn__label {padding: 0.5em 0;}

	/* Size */
	@media (max-width:46rem) {
		button.btn,
		a.btn {padding: 0 1.5em; }

		button.btn--inList,
		a.btn--inList {padding: 0 1em; height: 29px;}
		.btn--inList .btn__label {padding: 0.72em 0;}
	}


/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {--stroke-color:var(--color-orange);appearance: none;font-size: 3em;border: none;border-radius: 0;cursor: pointer;color: var(--color-orange);background: transparent;font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative;padding: 0;width: 1em;height: 1em;box-shadow: inset 0 0 0 1px var(--stroke-color);transition: color 0.3s;}
.btnIcon::before {position: absolute;z-index: 0;display: block;content:" ";background-color: var(--color-orange);top: 0;bottom: 0;left: 0;right: 0;transform-origin: 0% 100%;transform: scaleY(0);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.btnIcon .svgIcon {font-size: 0.5em;position: absolute;top: 50%;left:50%;/* backface-visibility: hidden; replace with will-change? */transform:translate3d(-50%, -50%, 0);transition: opacity 0.3s;}

	/* Pour que le target dans event delegation soit le button au lieu du contenu a l'interieur. */
	.btnIcon * {pointer-events: none;}

	/* Hover */
	button.btnIcon:hover,
	a.btnIcon:hover,
	a:hover .btnIcon {color:#fff; }
	button.btnIcon:hover::before,
	a.btnIcon:hover::before,
	a:hover .btnIcon::before {transform: scaleY(0.999); }

	/* Disabled */
	.btnIcon:disabled,
	.btnIcon.disabled {opacity: 0.5; cursor: default; pointer-events: none;}

	/* 
	ALT :
	Filled. */
	button.btnIcon--filled,
	a.btnIcon--filled,
	.btnIcon--filled {background-color: var(--color-orange);color: #fff;box-shadow: none;}
	.btnIcon--filled::before {background-color: var(--color-black); }

	/* 
	ALT :
	Delete. */
	button.btnIcon--delete,
	a.btnIcon--delete,
	.btnIcon--delete {font-size: 2.41em;color: var(--color-red);box-shadow: none;}
	.btnIcon--delete::before {background-color: var(--color-red); }
	.btnIcon--delete .svgIcon {font-size: 0.6em; }