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

/*
BUTTON / Standard
Bouton standard du site avec une icone. */
button.btn,
a.btn,
input[type='submit'].btn {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 500;font-size: 1em;line-height: 1.2;color: var(--color-green);padding: 0;text-transform: uppercase;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;}
.btn__label {z-index: 1; display: block;flex: 1 1 auto;padding: 1.002em 0; font-size: 0.85em; transition: color 0.2s; }
.btn__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 0; transition: color 0.2s; }

	/* Spacing entre le label et l'icone. */
	.btn > .btn__label + .btn__icon {margin-left: 1.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) {color:var(--color-blue); }

	/* Disabled */
	.btn:disabled {opacity: 0.5; cursor: default;}

	/* On dark */
	.onBlue .btn {color:var(--color-white); }

		/* Hover */
		.onBlue .btn:hover:not(:disabled) {color:var(--color-black); }


	/* 
	ALT :
	Plus simple, icone pas dans un hex. */
	button.btn--simple,
	a.btn--simple,
	input[type='submit'].btn--simple { }
	.btn--simple .btn__label { }
	.btn--simple .btn__icon {font-size: 3em;}
	.btn--simple > .btn__label + .btn__icon {margin-left: 0.5em;}



/*
BUTTON / Icon
Bouton qui contient seulement une icone. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none;font-size: 3em;border: none;color: var(--color-black);background: none;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;cursor: pointer;transition: color 0.2s;}
.btnIcon .svgIcon {font-size: 1em;position: absolute;top: 50%;left:50%;transform:translate3d(-50%, -50%, 0); }

	/* Hover */
	button.btnIcon:hover,
	a.btnIcon:hover,
	a:hover .btnIcon,
	button:hover .btnIcon {color: var(--color-blue); }

	/* On dark */
	.onBlue .btnIcon {color: var(--color-white); }

		/* Hover */
		.onBlue button.btnIcon:hover,
		.onBlue a.btnIcon:hover,
		.onBlue a:hover .btnIcon,
		.onBlue button:hover .btnIcon {color: var(--color-black); }



/*
BUTTON / Icon hexagone
Bouton qui contient une icone dans un hexagone. */
button.btnIconHex,
a.btnIconHex,
.btnIconHex {
	--fillColor: var(--color-green);
	--size: 3em;
	--strokeColor: transparent;
	--strokeWidth:0px;
	--textColor:var(--color-white);
	appearance: none; font-size: 1em; border: none; color: var(--textColor); font-weight: normal; text-decoration: none; text-align: left; line-height: 1; display: inline-block; vertical-align: middle; padding: 0; cursor: pointer; position: relative; width: var(--size); height: calc(0.5774 * var(--size)); background: var(--fillColor); margin: calc(0.2887 * var(--size)) 0; border-left: solid var(--strokeWidth) var(--strokeColor); border-right: solid var(--strokeWidth) var(--strokeColor); transition: background 0.2s, color 0.2s; }
	
	/* Icone (ou label) */
	.btnIconHex .svgIcon {font-size: 3em;position: absolute;z-index: 2;top: 50%;left:50%;transform:translate3d(-50%, -50%, 0);}
	.btnIconHex .btnIconHex--label {font-size: 0.85em; font-weight: 500; position: absolute;z-index: 2;top: 50%;left:50%;transform:translate3d(-50%, -50%, 0);}

	/* Base des angles */
	button.btnIconHex::before,
	button.btnIconHex::after,
	a.btnIconHex::before,
	a.btnIconHex::after,
	.btnIconHex::before,
	.btnIconHex::after {content: ""; position: absolute; z-index: 1; width: calc(0.7071 * var(--size)); height: calc(0.7071 * var(--size)); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: calc(0.1464466 * var(--size) - var(--strokeWidth)); }

	/* Angles du haut */
	button.btnIconHex::before,
	a.btnIconHex::before,
	.btnIconHex::before {top: calc(-1 * 0.353553 * var(--size)); border-top: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); border-right: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); }

	/* Angles du bas */
	button.btnIconHex::after,
	a.btnIconHex::after,
	.btnIconHex::after {bottom: calc(-1 * 0.353553 * var(--size)); border-bottom: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); border-left: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); }

	/* Hover */
	button.btnIconHex:hover,
	a.btnIconHex:hover,
	a:hover .btnIconHex,
	button:hover .btnIconHex {--fillColor: var(--color-blue); }

	/* On dark */
	.onBlue button.btnIconHex,
	.onBlue a.btnIconHex,
	.onBlue .btnIconHex { }

		/* Hover */
		.onBlue button.btnIconHex:hover,
		.onBlue a.btnIconHex:hover,
		.onBlue a:hover .btnIconHex,
		.onBlue button:hover .btnIconHex {--fillColor: var(--color-black); --textColor:var(--color-white); }


	/* 
	ALT :
	Stroked. */
	button.btnIconHex--stroke,
	a.btnIconHex--stroke,
	.btnIconHex--stroke {--fillColor: var(--color-white);--strokeColor: var(--color-green);--strokeWidth: 1.5px;--textColor:var(--color-green);}

		/* Hover */
		button.btnIconHex--stroke:hover,
		a.btnIconHex--stroke:hover,
		a:hover .btnIconHex--stroke,
		button:hover .btnIconHex--stroke {--fillColor: var(--color-green); --textColor:var(--color-white);}
	

	/*
	ALT :
	White background. */
	button.btnIconHex--white,
	a.btnIconHex--white,
	.btnIconHex--white {--fillColor: var(--color-white); --textColor:var(--color-black);}

		/* Hover */
		button.btnIconHex--white:hover,
		a.btnIconHex--white:hover,
		a:hover .btnIconHex--white,
		button:hover .btnIconHex--white {--fillColor: var(--color-black); --textColor:var(--color-white); }
	

	/*
	ALT :
	Hover black background. */
	button.btnIconHex--hoverBlack,
	a.btnIconHex--hoverBlack,
	.btnIconHex--hoverBlack { }

		/* Hover */
		button.btnIconHex--hoverBlack:hover,
		a.btnIconHex--hoverBlack:hover,
		a:hover .btnIconHex--hoverBlack,
		button:hover .btnIconHex--hoverBlack {--fillColor: var(--color-black); --textColor:var(--color-white); }


	/*
	ALT :
	Bouton play. */
	button.btnIconHex--play,
	a.btnIconHex--play,
	.btnIconHex--play {--size: 5em;}

		/* Hover */
		button.btnIconHex--play:hover,
		a.btnIconHex--play:hover,
		a:hover .btnIconHex--play,
		button:hover .btnIconHex--play { }

		/* Smaller */
		@media (max-width:46rem) {
			button.btnIconHex--play,
			a.btnIconHex--play,
			.btnIconHex--play {--size: 4em;}
		}