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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn, 
a.btn, 
input[type='submit'].btn {appearance: none;position:relative;border: none;background: var(--color-gray);cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;gap: 1em;font-size: 0.85em;font-weight: 700;line-height: 1.2;text-transform: uppercase;color: var(--color-white);padding: 0 2em;text-decoration: none;box-sizing: border-box;text-align: center;min-width: 10em;max-width: 100%;transition: background-color 0.2s, color 0.2s;}
.btn__label {z-index: 1; display: block;flex: 1 1 auto;padding: 1.8em 0;}
.btn__icon {z-index: 1;display: block;flex: 0 0 auto;font-size: 3em;padding: 0;margin: 0 -0.25em;}

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

	/* Hover */
	.btn:hover,
	a:hover .btn {background-color:var(--color-orange); }

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

	/*
	ALT :
	Hover blanc. */
	button.btn--hoverBlanc, 
	a.btn--hoverBlanc, 
	input[type='submit'].btn--hoverBlanc { }
	.btn--hoverBlanc:hover,
	a:hover .btn--hoverBlanc {background-color: var(--color-white); color: var(--color-gray); }

	/*
	ALT :
	Orange. */
	button.btn--orange, 
	a.btn--orange, 
	input[type='submit'].btn--orange {background-color: var(--color-orange); }
	.btn--orange:hover,
	a:hover .btn--orange {background-color: var(--color-gray); color: var(--color-white); }

	/*
	ALT :
	Orange + hover blanc. */
	button.btn--orangeHoverBlanc, 
	a.btn--orangeHoverBlanc, 
	input[type='submit'].btn--orangeHoverBlanc {background-color: var(--color-orange); }
	.btn--orangeHoverBlanc:hover,
	a:hover .btn--orangeHoverBlanc {background-color: var(--color-white); color: var(--color-orange); }

	/*
	ALT :
	Petite taille. */
	button.btn--sm, 
	a.btn--sm, 
	input[type='submit'].btn--sm {font-size: 0.8em; padding: 0 2.5em;}
	.btn--sm .btn__label {padding: 1.3em 0;}

	/*
	ALT :
	Plus large. */
	button.btn--wide, 
	a.btn--wide, 
	input[type='submit'].btn--wide {width: min(25em, 100%);}
	.btn--wide .btn__label {padding: 2em 0;}

	/*
	ALT :
	Stroked. */
	button.btn--stroked, 
	a.btn--stroked, 
	input[type='submit'].btn--stroked {background: transparent; color: var(--color-gray); box-shadow: inset 0 0 0 1px var(--color-gray); }
	.btn--stroked:hover {background-color: var(--color-gray); color: var(--color-white); }

		/* On dark */
		.onDark button.btn--stroked, 
		.onDark a.btn--stroked, 
		.onDark input[type='submit'].btn--stroked {color: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-white); }
		.onDark .btn--stroked:hover,
		.onDark a:hover .btn--stroked {background-color: var(--color-white); color: var(--color-gray); }

		/* On orange */
		.onOrange button.btn--stroked, 
		.onOrange a.btn--stroked, 
		.onOrange input[type='submit'].btn--stroked {color: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-white); }
		.onOrange .btn--stroked:hover,
		.onOrange a:hover .btn--stroked {background-color: var(--color-white); color: var(--color-gray); }

	/*
	ALT :
	Offset a gauche. */
	button.btn--offset, 
	a.btn--offset, 
	input[type='submit'].btn--offset {padding-left: var(--width-std-left);will-change: padding;transition: background-color 0.2s, color 0.2s, padding 0.3s var(--ease-cubic);}

		/* Hover */
		button.btn--offset:hover,
		a.btn--offset:hover,
		input[type='submit'].btn--offset:hover {padding-left: calc(var(--width-std-left) + 2em); }

	/*
	ALT :
	Text Link. */
	button.btn--textLink, 
	a.btn--textLink, 
	input[type='submit'].btn--textLink {font-size: 1.5em;background: transparent;color: currentColor;box-shadow: none;padding: 0;gap: 0.5em;min-width: 0;}
	.btn--textLink .btn__label {padding: 0.5em 0;}
	.btn--textLink .btn__icon {font-size: 1.8em; }

		/* Hover */
		button.btn--textLink:hover,
		a.btn--textLink:hover,
		input[type='submit'].btn--textLink:hover {background-color: transparent; color: var(--color-orange); }

		/* On dark */
		.onDark .btn--textLink:hover,
		.onDark a:hover .btn--textLink {background-color: transparent; color: var(--color-orange); }

		/* On orange */
		.onOrange .btn--textLink:hover,
		.onOrange a:hover .btn--textLink {background-color: transparent; color: var(--color-gray); }

	/*
	ALT :
	Text link underlined. */
	button.btn--textLinkUL, 
	a.btn--textLinkUL, 
	input[type='submit'].btn--textLinkUL {font-size: 1.2em;background: transparent;color: currentColor;box-shadow: none;padding: 0 0.5em;text-decoration:underline;text-underline-offset: 0.15em;text-decoration-thickness: 0.1em;}
	.btn--textLinkUL .btn__label {padding: 0.5em 0;}
	.btn--textLinkUL:hover {background-color: transparent; color: var(--color-orange); }

		/* On dark */
		.onDark .btn--textLinkUL:hover,
		.onDark a:hover .btn--textLinkUL {background-color: transparent; color: var(--color-orange); }

		/* On orange */
		.onOrange .btn--textLinkUL:hover,
		.onOrange a:hover .btn--textLinkUL {background-color: transparent; color: var(--color-gray); }

	/*
	ALT :
	Variante dans les panels du menu principal. */
	button.btn--plain, 
	a.btn--plain, 
	input[type='submit'].btn--plain {font-size: 1.2em; background-color: var(--color-orange); border: 0.15em solid var(--color-white); }
	.btn--plain .btn__label {padding: 0.6em 0; }

		/* Hover */
		button.btn--plain:hover,
		a.btn--plain:hover,
		input[type='submit'].btn--plain:hover {background-color: var(--color-white); color: var(--color-orange); }



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none;font-size: 3.7em;border: none;color: var(--color-white);background: var(--color-orange);font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative;cursor: pointer;padding: 0;width: 1em;height: 1em;transition: background-color 0.2s, color 0.2s, opacity 0.2s;}
.btnIcon .svgIcon {font-size: 0.65em;position: absolute;top: 50%;left:50%;transform:translate(-50%, -50%);}
.btnIcon__label {font-size: 0.2em; font-weight: 700; position: absolute;top: 51%;left:50%;transform:translate(-50%, -50%);}

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

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

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

	/*
	ALT:
	Orange hover dark. */
	button.btnIcon--orangeHoverDark,
	a.btnIcon--orangeHoverDark,
	.btnIcon--orangeHoverDark { }

		/* Hover */
		button.btnIcon--orangeHoverDark:hover,
		a.btnIcon--orangeHoverDark:hover,
		a:hover .btnIcon--orangeHoverDark {color: var(--color-white); background-color: var(--color-gray); }

	/*
	ALT:
	Blanc. */
	button.btnIcon--white,
	a.btnIcon--white,
	.btnIcon--white {color: var(--color-orange); background-color: var(--color-white); }

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

	/*
	ALT:
	Blanc pour la topbar. */
	button.btnIcon--whiteTB,
	a.btnIcon--whiteTB,
	.btnIcon--whiteTB {color: var(--color-gray); background-color: var(--color-white); }

		/* Hover */
		button.btnIcon--whiteTB:hover,
		a.btnIcon--whiteTB:hover,
		a:hover .btnIcon--whiteTB {color: var(--color-gray); background-color: var(--color-gray-medium); }

	/*
	ALT:
	Gris avec icon plus grande. */
	button.btnIcon--gray,
	a.btnIcon--gray,
	.btnIcon--gray {color: var(--color-orange); background-color: var(--color-gray-light); }
	.btnIcon--gray .svgIcon {font-size: 0.9em; }

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

	/*
	ALT:
	Gris fonmcé. */
	button.btnIcon--darkGray,
	a.btnIcon--darkGray,
	.btnIcon--darkGray {color: var(--color-white); background-color: var(--color-gray); }

		/* Hover */
		button.btnIcon--darkGray:hover,
		a.btnIcon--darkGray:hover,
		a:hover .btnIcon--darkGray {color: var(--color-white); background-color: var(--color-orange); }

	/*
	ALT :
	Banner : beaucoup plus gros. */
	button.btnIcon--banner,
	a.btnIcon--banner,
	.btnIcon--banner {font-size: 7em; border: 0.02em solid currentColor; color: currentColor; background: transparent; }
	.btnIcon--banner::before {position:absolute; z-index:-2; display:block; content:''; inset: 0; background: var(--color-white); opacity: 0.2; }
	.btnIcon--banner::after {position:absolute; z-index:-1; display:block; content:''; inset: 0; background: var(--color-orange); transform: scale(0.2); transform-origin: bottom left; transition: transform 0.3s var(--ease-cubic); }
	.btnIcon--banner .svgIcon {font-size: 1.2em; }

		/* On dark */
		.onDark .btnIcon--banner::before {background-color: var(--color-black); }

		/* Hover */
		button.btnIcon--banner:hover,
		a.btnIcon--banner:hover,
		a:hover .btnIcon--banner {color: currentColor; background-color: transparent; }
		.btnIcon--banner:hover::after {transform: none;}

		/* Smaller */
		@media (max-width:46rem) {
			button.btnIcon--banner,
			a.btnIcon--banner,
			.btnIcon--banner {font-size: 5.5em; }
		}

	/*
	ALT :
	Play, pour video. */
	button.btnIcon--play,
	a.btnIcon--play,
	.btnIcon--play {font-size: 6.7em;border: 0.15rem solid var(--color-orange);color: var(--color-orange);background: rgba(0 0 0 / 60%);border-radius: 50%;will-change: transform;transition: background-color 0.3s, transform 0.3s var(--ease-cubic);}
	.btnIcon--play .svgIcon {font-size: 0.8em; }

		/* Hover */
		button.btnIcon--play:hover,
		a.btnIcon--play:hover,
		a:hover .btnIcon--play {background-color: rgba(0, 0, 0, 1); transform: scale(1.1); }

		/*
		ALT :
		In header is bigger. */
		button.btnIcon--playPH,
		a.btnIcon--playPH,
		.btnIcon--playPH {font-size: 10em; }

			/* Smaller */
			@media (max-width:46rem) {
				button.btnIcon--playPH,
				a.btnIcon--playPH,
				.btnIcon--playPH {font-size: 6.7em; }
			}

	/*
	ALT :
	Rond, pour les hotspots. */
	button.btnIcon--hotPin,
	a.btnIcon--hotPin,
	.btnIcon--hotPin {font-size: 3.4em;color: var(--color-white);background: var(--color-orange);border: 0.05em solid var(--color-white);box-shadow: 0 0 0 0.1em rgb(var(--color-orange-rgb) / 50%);border-radius: 50%;will-change: transform;transition: background-color 0.3s, transform 0.3s var(--ease-cubic), box-shadow 0.3s;}
	.btnIcon--hotPin .svgIcon {font-size: 0.8em; }

		/* Hover */
		button.btnIcon--hotPin:hover,
		a.btnIcon--hotPin:hover,
		a:hover .btnIcon--hotPin {background-color: var(--color-orange); color: var(--color-white); transform: scale(1.1); }

		/* Active */
		button.btnIcon--hotPin.active,
		a.btnIcon--hotPin.active,
		.iHotSpot.active .btnIcon--hotPin {background-color: var(--color-gray); color: var(--color-white); box-shadow: 0 0 0 0.1em rgb(var(--color-gray-rgb) / 50%); transform: scale(1.1); }

		/* Sizes */
		@media (max-width:62rem) {
			button.btnIcon--hotPin,
			a.btnIcon--hotPin,
			.btnIcon--hotPin {font-size: calc(1.6em + 3vw); }
		}

	/*
	ALT:
	No background. */
	button.btnIcon--noBG,
	a.btnIcon--noBG,
	.btnIcon--noBG {background: transparent; color: var(--color-orange);}

		/* Hover */
		button.btnIcon--noBG:hover,
		a.btnIcon--noBG:hover,
		a:hover .btnIcon--noBG {background: transparent; color: var(--color-gray);}

		/* onOrange */
		.onOrange button.btnIcon--noBG,
		.onOrange a.btnIcon--noBG,
		.onOrange .btnIcon--noBG {color: var(--color-white);}

	/*
	ALT:
	No background white color. */
	button.btnIcon--noBG--white,
	a.btnIcon--noBG--white,
	.btnIcon--noBG--white {background: transparent; color: var(--color-white);}

		/* Hover */
		button.btnIcon--noBG--white:hover,
		a.btnIcon--noBG--white:hover,
		a:hover .btnIcon--noBG--white {background: transparent; color: var(--color-orange);}



/*
BUTTON / Side by side */
.btnSBS {display: flex;flex-wrap: wrap;gap: 1em 2em;}
.btnSBS > .btn {flex:0 1 auto; }