/* Feuille de style des particularités de la page Nous joindre créée par Sylvain Campeau en septembre 2020 */

/* Form */

	form {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100%;
		margin: -2rem auto 2rem auto;
	}

		form.elements {
			display: block;
			margin: 0 0 2rem 0;
		}

		form > .field {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			padding: 2rem 0 0 2rem;
			width: calc(100% - 2rem);
		}

			form > .field.half {
				width: calc(50% - 1rem);
			}

			form > .field.third {
				width: calc(100%/3 - 0.66667rem);
			}

			form > .field.quarter {
				width: calc(25% - 0.5rem);
			}

		form ul.actions {
			margin-bottom: 0;
		}

		form.alt {
			display: block;
			width: 100%;
			margin: 0 0 2rem 0;
		}

			form.alt > .actions {
				margin: 0 0 2rem 0;
				width: 100%;
			}

		@media screen and (max-width: 736px) {

			form {
				margin: -1.5rem auto 2rem auto;
			}

				form > .field {
					padding: 1.5rem 0 0 1.5rem;
					width: calc(100% - 1.5rem);
				}

					form > .field.half {
						width: calc(100% - 1.5rem);
					}

					form > .field.third {
						width: calc(100% - 1.5rem);
					}

					form > .field.quarter {
						width: calc(100% - 1.5rem);
					}

				form > .actions {
					margin: 1.5rem 0 0 1.5rem;
					width: calc(100% - 3rem);
				}

		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		border-radius: 4px;
		border: none;
		border: solid 1px;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1rem;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		input[type="search"]:invalid,
		input[type="url"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

	label {
		display: block;
		font-size: 1rem;
		font-weight: 400;
		margin: 0 0 1rem 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"] {
		height: 3.25rem;
	}

	select {
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 3.25rem;
		padding-right: 3.25rem;
		text-overflow: ellipsis;
	}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	textarea {
		padding: 0.75rem 1rem;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			cursor: pointer;
			display: inline-block;
			font-size: 1rem;
			font-weight: 300;
			padding-left: 2.825rem;
			padding-right: 0.875rem;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				border-radius: 4px;
				border: solid 1px;
				content: '';
				display: inline-block;
				fint-size: 0.8rem;
				height: 1.95rem;
				left: 0;
				line-height: 1.95rem;
				position: absolute;
				text-align: center;
				top: -0.1625rem;
				width: 1.95rem;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			content: '\f00c';
		}

	input[type="checkbox"] + label:before {
		border-radius: 4px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		opacity: 1.0;
	}

	:-moz-placeholder {
		opacity: 1.0;
	}

	::-moz-placeholder {
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		opacity: 1.0;
	}

	label {
		color: #282828;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		background-color: transparent;
		border-color: rgba(0, 0, 0, 0.15);
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		input[type="search"]:focus,
		input[type="url"]:focus,
		select:focus,
		textarea:focus {
			border-color: #c73f4b;
			box-shadow: 0 0 0 1px #c73f4b;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.15)' /%3E%3C/svg%3E");
	}

		select option {
			color: #282828;
			background-color: #ffffff;
		}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		color: #282828;
	}

		input[type="checkbox"] + label:before,
		input[type="radio"] + label:before {
			background-color: transparent;
			border-color: rgba(0, 0, 0, 0.15);
		}

	input[type="checkbox"]:checked + label:before,
	input[type="radio"]:checked + label:before {
		background-color: #c73f4b;
		border-color: #c73f4b;
		color: #ffffff;
	}

	input[type="checkbox"]:focus + label:before,
	input[type="radio"]:focus + label:before {
		border-color: #c73f4b;
		box-shadow: 0 0 0 1px #c73f4b;
	}

	::-webkit-input-placeholder {
		color: #bbbbbb !important;
	}

	:-moz-placeholder {
		color: #bbbbbb !important;
	}

	::-moz-placeholder {
		color: #bbbbbb !important;
	}

	:-ms-input-placeholder {
		color: #bbbbbb !important;
	}