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

/*
BUTTON / Standard
Bouton standard du site. */
button.btn,
a.btn,
input[type='submit'].btn {appearance: none;position:relative;border: 1px solid var(--color-blue);background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 700;font-size: 0.95em;line-height: 1.2;color: var(--color-blue);padding: 0 1.6em;text-decoration: none;box-sizing: border-box;text-align: center;max-width: 100%;border-radius: 2em;transition: color 0.3s, border-color 0.3s;}
.btn::before {position: absolute;z-index: 0;display: block;content:" ";background-color: var(--color-blue);top:0;bottom:0;left:0;right:0;opacity:0;border-radius: 2em;transition: opacity 0.3s;}
.btn__label {z-index: 1;display: block;flex: 1 1 auto;padding: 1em 0;}
.btn__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 0;}

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

	/* 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-white); }
	.btn:hover:not(:disabled)::before {opacity: 1;}

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

	/* On dark */
	.onDark .btn {color: var(--color-white);border-color: var(--color-white); }
	.onDark .btn::before {background-color: var(--color-white); }

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

	/*
	ALT :
	Filled. */
	button.btn--fill,
	a.btn--fill,
	input[type='submit'].btn--fill {color: var(--color-white);border-color: var(--color-blue);background-color: var(--color-blue); }
	.btn--fill::before {background-color: var(--color-purple); }

		/* Hover */
		.btn--fill:hover:not(:disabled) {color:var(--color-white);border-color:var(--color-purple); }

		/* On dark */
		.onDark .btn--fill {color: var(--color-blue);border-color: var(--color-white);background-color: var(--color-white); }
		.onDark .btn--fill::before {background-color: var(--color-purple); }

			/* Hover */
			.onDark .btn--fill:hover:not(:disabled) {color:var(--color-white);border-color:var(--color-purple); }

	/*
	ALT :
	Smaller. */
	button.btn--sm,
	a.btn--sm,
	input[type='submit'].btn--sm {font-size: 0.85em;font-weight: 400; }
	.btn--sm .btn__label {padding: 0.65em 0; }



/*
BUTTON / Icon with label
Texte a gauche sur fond transparent, et icone comme un btnIcon. */
button.btnIWL,
a.btnIWL,
input[type='submit'].btnIWL {appearance: none;position:relative;border: none;background: transparent;cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 700;font-size: 0.9em;line-height: 1.2;color: var(--color-blue);padding: 0;text-decoration: none;box-sizing: border-box;text-align: left;max-width: 100%;}
.btnIWL__label {z-index: 1;display: block;flex: 1 1 auto;padding-right: 1.2em;}
.btnIWL__icon {z-index: 1; display: block;flex: 0 0 auto;padding: 0;}

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

	/* Hover */
	.btnIWL:hover:not(:disabled) {color:var(--color-blue); }

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

	/* On dark */
	.onDark .btnIWL {color: var(--color-white); }

		/* Hover */
		.onDark .btnIWL:hover:not(:disabled) {color:var(--color-white); }



/*
BUTTON / Offres
Logo IQ sm a gauche. */
button.btnOffres,
a.btnOffres,
input[type='submit'].btnOffres {appearance: none;position:relative;border: none;background: var(--color-blue);cursor: pointer;vertical-align: middle;display: inline-flex;align-items: center;font-weight: 700;font-size: 1.2em;line-height: 1.2;color: var(--color-white);padding: 0 0.9em;text-decoration: none;box-sizing: border-box;text-align: left;max-width: none;border-radius: 2em 0 0 2em;}
.btnOffres::before {position: absolute;z-index: 0;display: block;content:" ";background-color: var(--color-purple);top:0;bottom:0;left:0;right:0;opacity:0;border-radius: 2em 0 0 2em;transition: opacity 0.3s;}
.btnOffres__label {z-index: 1;display: block;flex: 1 1 auto;padding: 1em 0;white-space: nowrap;}
.btnOffres__icon {z-index: 1;display: block;flex: 0 0 auto;padding: 0;font-size: 2.2em;}

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

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

	/* Hover */
	.btnOffres:hover:not(:disabled) { }
	.btnOffres:hover:not(:disabled)::before {opacity: 1;}

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



/*
BUTTON / Icon
Bouton qui contient seulement une icone avec BG. */
button.btnIcon,
a.btnIcon,
.btnIcon {appearance: none; font-size: 3.5em;border: none;color: var(--color-white);background: var(--color-blue);font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: inline-block;vertical-align: middle;position: relative; margin: 0; padding: 0;width: 1em;height: 1em;border-radius: 50%; transition: background-color 0.3s;}
.btnIcon .svgIcon {font-size: 0.5em;position: absolute;top: 50%;left:50%; transform:translate3d(-50%, -50%, 0);}

	/* Hover */
	button.btnIcon:hover,
	a.btnIcon:hover,
	a:hover .btnIcon,
	button:not(:disabled):hover .btnIcon {cursor: pointer;background-color: var(--color-purple);color: var(--color-white);}

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

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

	/*
	ALT :
	Share item.
	White background, a little bit smaller. */
	button.btnIcon--shareItem,
	a.btnIcon--shareItem,
	.btnIcon--shareItem {font-size: 3em;background-color: var(--color-white);color: var(--color-blue); transition: color 0.3s;}
	.btnIcon--shareItem .svgIcon {font-size: 0.6em; }

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

	/* 
	ALT :
	Play.
	Animation scale on hover. */
	button.btnIcon--play,
	a.btnIcon--play,
	.btnIcon--play {box-shadow: 0 0 0 2px var(--color-purple); transition: background-color 0.3s, transform 0.3s; }

		/* Hover */
		button.btnIcon--play:hover,
		a.btnIcon--play:hover,
		a:hover .btnIcon--play,
		button:not(:disabled):hover .btnIcon--play {transform: scale(1.25); }

	/* 
	ALT :
	Plus gros bouton. */
	button.btnIcon--big,
	a.btnIcon--big,
	.btnIcon--big {font-size: 7.5em;}

		/* Size */
		@media (max-width:46rem) {
			button.btnIcon--big,
			a.btnIcon--big,
			.btnIcon--big {font-size: 6em;}
		}