div#header-wrapper {
	background-color: $primary-color;

	div#header {
		padding-top: 20px;
		height: 48px;
		padding: 0;

		div#toplinks {
			border-radius: 0;
			padding: 0.2em 1.4em 0.2em 2em;
			box-shadow: none;
			border: none;

			& a:hover {
				color: #231f20;
			}
		}
		div#toplinks:before {
			content: '';
			display: block;
			position: absolute;
			height: 0;
			border-top: 15px solid transparent;
			border-right: 15px solid black;
			top: 0;
			left: 0;
			z-index: 1;
		}
		div#toplinks:after {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 15px;
			height: 15px;
			background-color: $primary-color;
			z-index: 0;
		}
	}

	div#header-post {
		background: white;

		div.content{
			max-width: $width;
			margin: 0 auto;

			#logo {
				float: right;
				margin: 10px 1em 0 0;
				a {
					background: url(img/logo-montlouis-sur-loire.png) no-repeat;
					background-size: contain;
					display: inline-block;
					font-size: 0;
					padding: 30px 65px;
					position: relative;
				}
			}
		}
	}
}

div.polygone-wrapper {
	background-color:  $primary-color;
	max-width: $width;
	margin: 0 auto;
	padding: 0;

	div.polygone {
		height: 45px;
		background: url('img/polygone-blanc.svg') no-repeat center top transparent;
		width: 100%;
	}
}

div#nav-wrapper {
	background: transparent;

	div#nav {
		box-sizing: content-box;
		margin-top: -55px;
		max-width: calc(#{$width} - 160px);
		padding-right: 165px;
		padding-left: 10px;

		> ul {
			margin: 0;
			overflow: visible;

			> li {
				padding: 0 20px;
				line-height: 3em;
				transition: .5s;

				& a {
					font-family: Khand, sans-serif;
					padding: 0;
					line-height: 1.6em;
				}

				> a {
					font-size: 1.5em;
					font-weight: 600;

					> span::before {
						content: '';
						display: block;
						position: relative;
						height: 7px;
						background: #231f20;
						top: 45px;
						margin: 0 auto;
						transition: all 0.35s;
						width: 0;
					}
				}

				> ul {
					background: #231f20;
					padding: 20px;

					> li {
						border-bottom: 1px solid #646464;

						a {
							padding: 5px 20px;
							font-size: 1.2em;
							font-weight: 500;
							transition: .25s;
						}
					}

					> li:first-child {
						border-top: 1px solid #646464;
					}

					> li:hover a {
						color: white;
						background: #ef412a;
						padding-left: 30px;
					}
				}
			}
			> li.selected > a > span::before, > li:hover > a > span::before {
				width: 100%;
			}
			> li:first-child {
				padding-left: 0;
			}
			> li:last-child {
				padding-right: 0;
			}
		}
	}

	div#nav-post {
		margin: 30px 0 20px;
		height: 12px;
		background: url(img/HachureRepeat.gif) repeat transparent;
	}
}

div#page {
	div#main-content-wrapper {
		flex: unset;
		max-width: unset;

		div#main-content {

			div#content {
				max-width: $width;
				margin: 10px auto 50px;
				width: 100%;

				div#sidebar {
					border-right: 2px solid #d6d6d6;
					margin-right: 30px;
				}

				.cell.wcsformsofcategorycell {
					margin-bottom: 30px;
				}
				.cell.wcsformsofcategorycell > div {
					border: $custom-categorycell-border;
				}
				.cell.wcsformsofcategorycell > div > h2 {
					font-size: 1.3em;
					font-weight: 600;
					background: $primary-color;
					color: white;
					padding: 8px 20px 8px 40px;
				}
				.cell.wcsformsofcategorycell > div > h2:before {
					content: '';
					display: block;
					position: absolute;
					height: 0;
					border-top: 24px solid white;
					border-right: 24px solid black;
					top: #{extract-width($custom-categorycell-border) * -1};
					left: #{extract-width($custom-categorycell-border) * -1};
					z-index: 1;
				}
				.cell.wcsformsofcategorycell > div > h2:after {
					content: '';
					display: block;
					position: absolute;
					left: -1px;
					top: -1px;
					width: 24px;
					height: 24px;
					background-color: $primary-color;
					z-index: 0;
				}
				.cell.wcsformsofcategorycell > div > div > ul {
					padding: 10px 10px 10px 20px;
					list-style-type: disc;
					list-style-position: inside;
					list-style-image: url('img/list-disc-orange.png');

					> li {
						padding: 7px 0;

						> a {
							display: inline;
							border-bottom: none;
							color: #231f20;
							padding: 0;
						}
					}
					> li:hover a {
						color: $primary-color;
						background: transparent;
					}
				}
			}

			div#content-post {
				background: url(img/HachureRepeat.gif) repeat white;
			}

			.a-votre-service {
				background: url(img/HachureRepeat.gif) repeat white;
				max-width: $width;
				margin: auto;
				width: 100%;

				> div {
					> h2 {
						margin: 0;
						padding: 0 10px 0 0;
						text-transform: uppercase;
						font-family: "Montserrat",sans-serif;
						font-size: 1.75rem;
						font-weight: 600;
						border: 0;
						color: #08b89d;
						height: 70px;
						line-height: 70px;
						text-align: right;
					}

					> div > ul {
						list-style: none;

						> li {
							display: block;
							float: left;
							width: 245px;
							height: 131px;
							margin-right: 30px;
							margin-bottom: 30px;
							background: #fff;
							position: relative;
							transition: all 0.45s;

							> a {
								display: block;
								position: relative;
								width: 100%;
								height: 100%;
								text-decoration: none;
								text-align: center;
								margin: 0;
								padding: 0;
								font-size: 1.2em;
								font-weight: 500;

								> svg {
									width: 47px;
									height: 59px;
									top: 14px;
									position: relative;

									.ast0, .ast1 {
										transition: all 0.45s;
									}
									.ast1 {
										fill: $primary-color;
									}
									.ast0 {
										fill: #646464;
									}
								}

								span {
									display: block;
									position: absolute;
									width: 100%;
									text-align: center;
									bottom: 19px;
									font-family: "Khand",sans-serif;
									font-size: 1.125rem;
									color: #231f20;
									transition: all 0.45s;
								}
							}
						}

						> li:after {
							content: '';
							display: block;
							position: absolute;
							left: 0;
							top: 0;
							width: 30px;
							height: 30px;
							background: url('img/HachureRepeat.gif') -5px repeat;
							z-index: 0;
						}

						> li:before {
							content: '';
							display: block;
							position: absolute;
							height: 0;
							border-top: 30px solid transparent;
							border-right: 30px solid #08b89d;
							top: 0;
							left: 0;
							transition: all 0.35s ease;
							z-index: 1;
						}

						> li:hover {
							background: #231f20;

							> a {
								> svg {
									.ast1 {
										fill: white;
									}
									.ast0 {
										fill: #08b89d;
									}
								}
								> span {
									color: #fff;
								}
							}
						}
					}
				}
			}
		}

		.clear {
			display: block;
			height: 0;
		}
	}
}

footer {
	background: url(img/HachureRepeat.gif) repeat white;
	padding-top: 12px;

	div#footer-pre {
		background: white;

		div.polygone-wrapper {
			background: url(img/HachureRepeat.gif) repeat;
		}
	}

	div#footer-wrapper {
		background: white;

		div#footer {
			> div.logo {
				background: url(img/logo.svg) no-repeat;
				background-size: contain;
				display: inline-block;
				font-size: 0;
				width: 270px;
				height: 121px;
				position: relative;
				float: left;
				margin-right: 90px;
				margin-left: 10px;
			}

			> div.content {
				float: left;
				margin-left: 10px;

				.contact-footer {
					display: block;
					width: 300px;
					height: 230px;
					float: left;
					margin-right: 50px;
					position: relative;

					p.titre-footer {
						display: block;
						font-family: "Khand",sans-serif;
						font-size: 1.5rem;
						color: #09b89d;
						font-weight: 500;
						line-height: 26px;
						margin: 30px 0 27px;
					}
					p.texte-footer {
						display: block;
						line-height: 20px;
					}
					a.btn-contact {
						display: block;
						position: relative;
						bottom: -11px;
						height: 30px;
						line-height: 30px;
						text-decoration: none;
						font-size: 0.875rem;
						text-transform: uppercase;
						padding-left: 20px;
						transition: all 0.35s;
						color: #09b89d;

						span.picto-link {
							position: absolute;
							left: 0;
							width: 30px;
							height: 30px;
							background: #09b89d;
							border-radius: 50px;
							z-index: 0;
							transition: all 0.35s;

							svg {
								width: 15px;
								height: 10px;
								fill: #fff;
								position: relative;
								left: 7px;
								top: 0px;
							}
						}
						span.txt-label {
							position: relative;
							margin-left: 17px;
							transition: all 0.35s;
						}
					}
					a.btn-contact:hover {
						color: #fff;

						span.picto-link {
							width: 145px;
						}
						span.txt-label {
							margin-left: 7px;
						}
					}
				}

				.horaires-footer {
					display: block;
					width: 370px;
					height: 230px;
					float: left;
					position: relative;

					p.titre-footer {
						display: block;
						font-family: "Khand",sans-serif;
						font-size: 1.5rem;
						color: #09b89d;
						font-weight: 500;
						line-height: 26px;
						margin: 30px 0 27px;
					}
				}
			}
		}
	}
}

/* customization mobiles/petits écrans */
@media screen and ($max-mobile-viewport) {
	div#header-wrapper div#header div#toplinks {
		right: 20px;
	}

	div#nav-wrapper {
		margin-top: -50px;

		div#nav {
			margin-top: 0;
			padding-right: 20px;

			button#nav-button {
				background-color: $primary-color;
			}

			> ul {
				margin-left: 10px;
				overflow: hidden;
				border: none;

				> li, li.selected {
					background-color: $primary-color;
					color: white;
					padding: 0;
					margin: 0;

					a {
						color: white;

						> span::before {
							display: none;
						}
					}

					> a {
						padding: 5px 10px;
					}

					> ul {
						background: none;

						> li {
							border-bottom: 1px solid #ccc;
						}

						> li:first-child {
							border-top: 1px solid #ccc;
						}

						> li:hover {
							> a {
								background-color: #66e6d2;
							}
						}
					}
				}

				> li.selected {
					> a {
						background-color: #099e86;
					}
				}
				> li:hover {
					> a {
						background-color: #66e6d2;
					}
				}
			}
		}

		div#nav.toggled {
			> ul {
			}
		}
	}

	div#page div#main-content-wrapper div#main-content {
		div#content-post > div.cell.textcell > div > h2 {
			margin-right: 10px;
		}
		div#content div#sidebar {
			margin-bottom: 20px;
			border: none;
		}
	}

	footer div#footer-wrapper div#footer {
		> div.logo {
			margin-right: 30px;
		}
		> div.content {
			.contact-footer {
				margin-right: 30px;
			}
		}
	}
}


div#gauche + div#rub_service {
	border-left: 2px solid #d6d6d6;
	padding-left: 10px;
}

// Steps
.wcs-step {
	&--label {
		letter-spacing: 1px;
	}
	&:not(.current) & {
		&--marker {
			border: 1px solid;
		}
	}
	@include desktop-vertical-steps() {
		border-bottom: 1px solid #ccc !important;
	}
}

div#tracking-code {
	margin-bottom: 2em;
}

div#tracking-code a {
	display: block;
	font-weight: bold;
	border: 2px solid $primary-color;
}

div#rub_service div.submit-button {
	float: right;
}

.form-content--title,
div#rub_service h2 {
	text-align: left;
	color: $primary-color;
	font-size: 1.625rem;
	font-weight: 500;
	padding-left: 0;
	text-transform: none;
}

#evolutions:after {
	border: none;
	background: none;
	border-left: 1px dashed #aaa;
}

div#content #disclose-dataview {
	color: $primary-color;
	border: 2px solid $primary-color;
	padding: 1ex 3ex;
	display: inline-block;
	font-weight: bold;
	&:hover {
		background: $primary-color;
		color: white;
	}
}

div#evolution-log h2:first-child,
div#summary h2:first-child {
	color: #000;
	font-weight: normal;
	font-size: 1.25rem;
}

ul#evolutions span.status {
	font-weight: normal;
}

#content ul#evolutions li span.item {
	border-color: white !important;
	background: white !important;
}

#content ul#evolutions li span.item::before {
	content: "\f111";
	font-family: FontAwesome;
	color: #aaa;
}

ul#evolutions li:after {
	display: none;
}

div#content div.cancel-button button,
div#content div.cancel-button input {
	color: black;
	border-color: black;
	&:hover {
		background: black;
		color: white;
	}
}

input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
	&:focus,
	&:active {
		border-color: $primary-color;
	}
}
