$navigation_icons: ((index, maison),
		    (tableau-de-bord, maison),
		    (mon-espace, maison),
		    (services, loupe),
		    (autour-de-moi, marqueur),
		    (notifications, cloche),
		    (mon-compte, avatar));

html, body {
	background: #f2f0f1;
}

body {
	@media screen and (max-width: $desktop-limit) {
		font-size: 0.875rem;
	}
}

.site-header {
	z-index: 1000;
}

.site-header, .site-nav {
	background: white;
}

#header {
	position: relative;
	h1 {
		position: absolute;
		top: 20px;
		a {
			display: block;
			text-indent: -10000px;
			background: url(img/logo-toodego.png) top left no-repeat;
			width: 221px;
			height: 107px;
		}
	}
}

#nav > ul {
	font-family: Oswald;
	text-transform: uppercase;
	padding-top: 50px;
	margin: 0;
	text-align: right;
	overflow: inherit;
	& > li {
		position: relative;
		margin-left: 25px;
		&::before {
			content: "";
			background: transparent top center no-repeat;
			display: inline-block;
			width: 30px;
			height: 20px;
			position: relative;
			top: 2px;
		}
		@each $navigation_class, $navigation_icon in $navigation_icons {
			&.menu-#{$navigation_class}::before {
				background-image: url(img/#{$navigation_icon}.png);
				@media screen and (max-width: $desktop-limit) {
					background-image: url(img/#{$navigation_icon}-white.png);
				}
			}
		}
		&.menu-notifications:hover::before {
			animation-name: move_bell_animation;
			animation-duration: 1000ms;
			animation-iteration-count: 2;
			animation-timing-function: linear;
		}
	}
	a {
		font-weight: normal;
		padding: 0;
		padding-bottom: 1rem;
	}
	ul { // submenu
		border: 1px solid #999;
		border-width: 0 1px 1px 1px;
		padding-top: 1rem;
		li {
			a {
				padding: 0 1rem;
				color: $font-color;
				border-bottom: none;
				white-space: pre;
				&:hover {
					color: $red;
				}
			}
		}
	}
}

div.banner {
	background: transparent center center no-repeat;
	overflow: hidden;
	margin-bottom: -2px;
	height: 126px;
	img {
		opacity: 0;
	}
	&.category {
		font-family: Oswald;
		font-weight: bold;
		background: $red;
		color: white;
		text-align: center;
		font-size: 1.5rem;
		text-transform: uppercase;
		padding: 3rem 0;
		height: auto;
	}

	@media screen and (max-width: $desktop-limit) {
		+ main #main-content-wrapper #content {
			margin-top: 0;
		}
	}
}

div#main-content {
	min-height: auto;
}

#content #sidebar {
	width: 100%;
	@media screen and (max-width: $desktop-limit) {
		max-width: initial;
	}
	&.loading {
		&::before {
			position: absolute;
			content: "Chargement des résultats…";
			animation-name: pulse_opacity_animation;
			animation-iteration-count: infinite;
			animation-duration: 2000ms;
		}
	}
}

div.cell h2 {
	text-align: center;
}

#content div.group-title {
	cursor: pointer;
	clear: both;
	> div {
		background: #cdcdcd url(img/close-pane.png) no-repeat;
		background-position: right 10px center;
	}
	&.closed > div {
		background-image: url(img/open-pane.png);
	}
	&.no-foldable > div {
		background-image: none;
	}
	h2 {
		color: black;
		background: transparent;
		padding-right: 2.5rem;
		padding-left: 2.5rem;
		span.count {
			font-size: 90%;
		}
		span.move-up, span.move-down, span.remove {
			top: auto;
			left: auto;
			width: auto;
			height: auto;
			border-radius: 0;
			position: absolute;
			cursor: pointer;
			transition: all linear 0.3s;
			opacity: 0;
			padding: 0 0.5rem;
			background: none;
			pointer-events: none;
			&::after {
				font-family: FontAwesome;
				font-size: $font-size;
				position: static;
			}
			&.remove {
				right: 0.5rem;
			}
			&.move-down {
				right: 2.5rem;
			}
			&.move-up {
				right: 4.5rem;
			}
		}
		span.move-up::after {
			content: "\f062"; /* arrow-up */
		}
		span.move-down::after {
			content: "\f063"; /* arrow-down */
		}
		span.remove::after {
			content: "\f00d"; /* times */
		}
		a.a11y-toggle-link {
			position: absolute;
			right: 5px;
			top: 5px;
			bottom: 5px;
			width: 40px;
			display: block;
		}
	}
}

#content .edit-mode div.group-title {
	& > div {
		background-image: none;
	}
	h2 {
		span.move-up, span.move-down, span.remove {
			pointer-events: all;
			opacity: 1;
		}
		a.a11y-toggle-link {
			display: none;
		}
	}
}

.gru-content #columns .pn-notifications div.tile,
.gru-content #columns .current-forms div.tile,
.gru-content #columns .cell:not([class*="group-title"]) {
	transition: all linear 0.3s;
	&.closed {
		min-height: 0;
		max-height: 0px;
		opacity: 0;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
		border-width: 0 1px;
		overflow: hidden;
	}
}

@media screen and (max-width: $desktop-limit) {
	.gru-content #columns > .cell {
		margin-right: 0;
		max-width: calc(100% - 1rem);
		@media screen and (max-width: $desktop-limit) {
			&.intro-text,
			&#recherche {
				max-width: none;
			}
		}
	}
}

#content {
	margin-top: 2rem;
}

#content .dashboardcell {
	padding: 0;
	border: 0;
	background: transparent;
	.cell {
		border: none;
		margin: 1rem 0;
	}
	@media screen and (max-width: $desktop-limit) {
		.action-call {
			display: none !important;
		}
	}
}

#content .pn-notifications,
#content .wcscurrentdraftscell,
#content .wcscurrentformscell {
	padding: 0;
	border: 0;
	background: transparent;
	.tile {
		background: white;
		margin: 1rem 0;
	}
}

#content .pn-notifications div.tile,
#content .dashboardcell .cell div.tile,
#content div.current-forms div.tile,
#content div.cartads-dossiers div.tile,
#goto-destination div.tile {
	@include tile($tile-picture-width, $tile-picture-width, $tile-producer-circle-radius);
}

.BlockWidget div.tile {
	@include tile(110px, 110px, 35px);
	margin-bottom: 1em;
}

div.cell.cartads-dossiers {
	background: transparent;
	border: none;
	div.tile {
		background: white;
		margin-bottom: 1rem;
	}
}

div.wcsformcell.tile div.tile,
div.linkcell.tile div.tile {
	@include tile(110px, 110px, 35px);
}

#sidebar div.tile {
	@include tile($tile-picture-width * 2 /3, $tile-picture-width, $tile-producer-circle-radius);
}

div.buttons {
	text-transform: uppercase;
	button {
		font-weight: bold;
	}
}

%button {
	@extends %button;
	font-family: Oswald;
	text-transform: uppercase;
	padding: 0.5rem 1.5rem 0.2rem 1.5rem;
	box-shadow: none;
	background: white;
	color: $red;
	border: 1px solid $red;
	transition: all ease 0.2s;
	&:hover {
		background: $red;
		color: white;
		box-shadow: none;
	}
}

// Steps
.wcs-steps {
	font-size: 0.9em;
	margin-top: 2rem;
	margin-bottom: 2rem;
	&--list {
		align-items: flex-end;
		overflow: hidden;
		flex-wrap: nowrap;
		max-width: 90%;
		margin: 0 auto;
	}
}
.wcs-step {
	flex-direction: column;
	align-items: center;
	flex: 1 1 6em;
	max-width: 50%;
	position: relative;

	&--marker {
		border: 2px solid $red;
	}
	&--label {
		position: static;
		order: -1;
		padding-bottom: .66em;
		text-align: center;
		font-size: 1.1em;
	}

	@media screen and (min-width: $desktop-limit) {
		&:not(.current) & {
			&--label {
				display: block;
			}
		}
	}
	// Tie
	&::after {
		position: absolute;
		bottom: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important;
		left: 50%;
		width: calc(100% + #{$wcs-step-marker-size});
	}
}

div#content div#tracking-code {
	position: absolute;
	right: 0;
	top: 5rem;
	right: 2rem;
	background: white;
	padding: 0.5ex 1ex;
	h3, a {
		background: transparent;
		margin: 0 0;
		padding: 0 0;
		display: inline-block;
		font-size: 100%;
		color: $font-color;
		border: none;
	}
	h3::after {
		content: " : ";
	}
	a {
		padding-left: 1ex;
		font-weight: bold;
	}
	@media screen and (max-width: $desktop-limit) {
		position: static;
		text-align: center;
		padding-bottom: 0;
	}
}

div.banner + div div#content div#tracking-code {
	top: -5rem;
	right: 0;
}

#content div#rub_service {
	flex: 1;
	margin-top: 0;
	box-shadow: 0 0 5px #888;
	h2 {
		text-align: center;
		padding: 0;
		height: 125px;
		padding-top: 50px;
		font-size: 140%;
		font-weight: bold;
		background-size: cover;
		text-shadow: 0 0 2px black;
		span.commune {
			background: transparent center center no-repeat;
			background-size: 72px 72px;
			position: absolute;
			display: block;
			top: 124px / 2 - (72px / 2);
			left: 1rem;
			width: 72px;
			height: 72px;
			border-radius: 36px;
			@media screen and (max-width: $desktop-limit) {
				display: none;
			}
		}
	}
	form div.page > h3 {
		padding-top: 30px;
		background: url(img/surtitle.png) top center no-repeat;
	}
	form div.page div h3 {
		font-size: 100%;
	}
	.form-validation {
		.text-check-before-submit {
			text-align: center;
			font-size: 120%;
			margin-top: 4rem;
		}
		div.page {
			background: transparent;
		}
		div.MapWidget {
			margin-left: 0;
			margin-right: 0;
		}
	}
	div#tracking-code {
		form {
			padding: 0;
			button {
				margin: 0 auto;
				font-size: 90%;
			}
		}
	}
}

div#rub_service div.drafts-recall,
#content div#rub_service form {
	padding: 1ex 5rem;
	@media screen and (max-width: $desktop-limit) {
		padding: 1ex 1rem;
	}
}

#content div#rub_service form {
	h3 {
		text-align: center;
		border: none;
		font-size: 150%;
		max-width: 80%;
		margin: 2rem auto;
		font-family: Oswald;
		text-transform: uppercase;
	}
	.comment-field {
		margin: 1rem auto;
	}
	div.MapWidget {
		margin-left: -5rem;
		margin-right: -5rem;
		@media screen and (max-width: $desktop-limit) {
			margin-left: 0;
			margin-right: 0;
		}
		div.qommon-map {
			height: 500px;
			min-height: 300px;
			max-height: 50vh;
		}
	}
	div.buttons {
		text-align: center;
	}
}

#columns {
	> #gauche {
		display: none;
	}
}


@media screen and (max-width: $desktop-limit) {
	.gru-content #sidebar {
		flex: 0 0 auto;
	}

	div#content.gru-content div.cell {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		div.cell {
			margin-left: 0;
			margin-right: 0;
		}
		&.intro-text,
		&#recherche {
			margin-left: 0;
			margin-right: 0;
		}
	}
	.gru-content #columns > .cell[class*="grid-"] {
		@media screen and (min-width: $very-small-limit) {
			margin-left: 0.5rem;
			margin-right: 0rem;
		}
	}
}

/* notifications */
div#nav span.badge {
	color: white;
	background: darken($red, 10%);
	padding: 5px;
	border-radius: 10px;
	position: absolute;
	height: 14px;
	padding: 4px;
	top: 0px;
	left: 15px;
	@media screen and (max-width: $desktop-limit) {
		background: $red;
		top: 14px;
		left: calc(50% + 5px);
	}
}

div#nav span.badge::before,
div#nav span.badge::after {
	content: none;
}

#prefooter-wrapper {
	clear: both;
	background: #d6d6d6;
	#prefooter {
		position: relative;
		max-width: $width;
		margin: 0 auto;
		padding: 2rem 0;
		font-size: 0.812rem;
		font-weight: 500;
		@media screen and (max-width: $desktop-limit) {
			text-align: center;
		}
		strong {
			display: block;
			margin: 0;
			text-transform: uppercase;
			font-weight: normal;
		}
		ul {
			border-top: 1px solid black;
			display: inline-block;
			max-width: 50%;
			@media screen and (max-width: $desktop-limit) {
				width: 100%;
				max-width: 100%;
			}
			padding-top: 1rem;
			margin-left: 0;
			padding-left: 0;
			list-style: none;
			li {
				display: inline-block;
				padding: 0 0.5rem;
				border-right: 1px solid black;
				a {
					color: inherit;
					&:hover {
						color: $red;
					}
				}
				&:first-child {
					padding-left: 0;
				}
				&:last-child {
					border-right: 0;
				}
			}
		}
		div.imgs {
			position: absolute;
			top: 2rem;
			right: 0;
			img {
				max-width: 40%;
				margin: 0 2%;
			}
			@media screen and (max-width: $desktop-limit) {
				position: static;
			}
		}
	}
}

.gru-content div.cell.recherche {
	border: none;
	background: transparent;
	div.leaflet-container {
		border: $cell-border;
	}
}

.cell.backlink p {
	margin: 0;
}

.backlink a, a.backlink {
	color: black;
	background: url(img/back-arrow.png) 0 5px no-repeat;
	padding-left: 40px;
	line-height: 38px;
	display: inline-block;
	margin-top: 4rem;
	font-family: Oswald;
	font-weight: 400;
	@media screen and (max-width: $desktop-limit) {
		margin-top: 0rem;
		margin-left: 1rem;
	}
	&:hover {
		color: $red;
	}
	& + #content {
		margin-top: 1rem;
	}
}

.cell.backlink + #content {
	margin-top: 1rem;
}

a#collectivity-services {
	text-transform: uppercase;
	background: white;
	border: 1px solid $red;
	padding: 1ex;
	font-family: Oswald;
	float: right;
	&:hover {
		color: white;
		background: $red;
	}
}

p.my-collectivity {
	margin-top: 0;
	a {
		display: block;
		font-family: Oswald;
		text-transform: uppercase;
		text-decoration: underline;
		color: black;
	}
}

select#collectivities {
	width: 100%;
}

div.cell.profile-info {
	.profile-info {
		padding: 1em 3rem;
		span:first-child {
			color: $font-color;
			display: inline-block;
		}
		span.count {
			display: inline-block;
			border-radius: 20px;
			border: 1px solid $red;
			padding: 2px 4px;
			float: right;
		}
		a:hover {
			span:first-child {
				color: $red;
			}
			span.count {
				background: $red;
				color: white;
			}
		}
	}
	@media screen and (max-width: $desktop-limit) {
		margin-top: 1rem;
		.profile-info {
			padding: 0rem 1rem;
			p {
				display: inline-block;
				width: 48%;
				span.count {
					float: none;
				}
			}
		}
	}
}

div.wcs-tracking-code-input {
	form {
		display: flex;
		margin: 0;
		input {
			border-right: 0;
			flex: 1;
			max-width: calc(100% - 2rem);
			width: 0;
			&:focus {
				border-right: 0;
				border-color: #888;
			}
		}
		button,
		button:hover {
			margin: 3px 0 4px 0px;
			color: transparent;
			background: $red url(img/loupe-white.png) center center no-repeat;
		}
	}
	text-align: justify;
}


#footer {
	position: relative;
	font: Raleway;
	font-weight: bold;
	font-size: 0.75rem;
	a {
		color: white;
	}
	div.menucell {
		text-align: left;
		@media screen and (max-width: $desktop-limit) {
			text-align: center;
		}
	}
	div.menucell li {
		text-transform: uppercase;
		margin: 2rem 0 1rem 0;
		display: inline-block;
		a {
			display: inline-block;
			padding: 0 1rem;
			text-decoration: none;
			border: 0;
			border-right: 1px solid white;
			&:hover {
				background: inherit;
				color: $red;
			}
		}
		&:first-child a {
			padding-left: 0;
		}
		&:last-child a {
			border-right: 0;
		}
		@media screen and (max-width: $desktop-limit) {
			margin: 0 0 1ex 0;
			line-height: 150%;
		}
	}
	#lien-metropole {
		position: absolute;
		right: 0;
		top: 2rem;
		p {
			margin: 0;
		}
		a {
			display: inline-block;
			line-height: 20px;
			height: 20px;
			padding-left: 35px;
			background: url(img/footer-metropole-plus.png) left center no-repeat;
		}
		@media screen and (max-width: $desktop-limit) {
			display: none;
		}
	}
	@media screen and (max-width: $desktop-limit) {
		text-align: center;
	}
}

@media screen and (min-width: $desktop-limit) {
	#nav ul li a {
		line-height: 3em;
	}
	.authenticated-user #nav ul li.menu-mon-compte {
		> a span::after {
			font-family: FontAwesome;
			content: "\f142";  // kebab
			padding-left: 1ex;
			padding-right: 1ex;
		}
	}

	.anonymous-user #nav ul li.menu-mon-compte {
		&:hover a {
			border: none;
		}
		a {
			text-align: left;
			padding-left: 50px;
			letter-spacing: 1px;
			background: black url(img/glc2.png) top left no-repeat;
			background-size: auto 45px;
			color: white;
			height: 45px;
			width: 180px;
			display: inline-block;
			&:hover {
				text-decoration: underline;
			}
			&:focus {
				outline: 1px dotted #aaa;
			}
		}
		&::before {
			content: none;
		}
	}
}

@media screen and (max-width: $desktop-limit) {
	.gru-content {
		flex-direction: column;
	}
	#header {
		text-align: center;
		h1 {
			padding-top: 0px;
			position: relative;
			text-align: center;
			display: inline-block;
			top: 5px;
			a {
				height: 60px;
				width: 124px;
				background-size: auto 60px;
			}
			&::after {
				width: 45px;
				height: 45px;
				background-size: 45px;
				bottom: -22px;
			}
		}
	}
	.gru-content #sidebar div.cell {
		margin-right: 0;
	}
	.has-pwa-navigation footer {
		margin-bottom: $mobile-navigation-height;
	}
	#footer-wrapper {
		padding-bottom: 0;
		// different background to avoid mixing with navigation bar
		background: #2e2e2e;
	}
	.site-nav {
		height: $mobile-navigation-height;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		#nav > ul {
			height: $mobile-navigation-height;
			background: black;
			padding-top: 0;
			& > li {
				position: relative;
				margin-left: 0;
				width: 20%;
				float: left;
				text-align: center;
				&:first-child > a {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
				}
				&:last-child > a {
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
				}
				&:hover > a,
				&.selected > a {
					background: $title-background;
				}
				> a {
					width: 100%;
					border-top-right-radius: 3px 50%;
					border-bottom-right-radius: 3px 50%;
					border-top-left-radius: 3px 50%;
					border-bottom-left-radius: 3px 50%;
					line-height: 0.8em;
					height: $mobile-navigation-height;
					padding-top: $mobile-navigation-height / 2;
					border-bottom: 0;
					> span {
						display: block;
						height: $mobile-navigation-height / 2;
						font-size: 0.625rem;
						color: white;
					}
				}
				&::before {
					position: absolute;
					background-position: 50% 2px;
					width: 100%;
				}
			}
			ul { // submenu
				&.toggled {
					display: block;
				}
				position: fixed;
				bottom: $mobile-navigation-height;
				right: 0;
				border-width: 1px 0 0 1px;
				padding-top: 0;
				li {
					a {
						background: white;
					}
				}
			}
		}
	}
}

@keyframes move_bell_animation {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(10deg); }
	75% { transform: rotate(-10deg); }
	100% { transform: rotate(0deg); }
}

@keyframes pulse_opacity_animation {
	0% { opacity: 1; }
	50% { opacity: 0.2; }
	100% { opacity: 1; }
}

@media screen and (max-width: $desktop-limit) {
	.pk-mobile-only, .mobile-only { display: block !important; }
	.pk-desktop-only, .desktop-only { display: none !important; }
}

@media screen and (min-width: $desktop-limit+1px) {
	.pk-mobile-only, .mobile-only { display: none !important; }
	.pk-desktop-only, .desktop-only { display: block !important; }
}

#connect-dialog {
	z-index: 1000000;
	position: fixed;
	top: 20vh;
	left: calc(50% - 20ex);
	width: 40ex;
	background: white;
	border: 2px solid black;
	padding: 1rem;
	text-align: center;
	a.pk-button {
		margin: 0.5rem;
	}
	.close {
		position: absolute;
		top: 0;
		right: 1ex;
		cursor: pointer;
	}
	@media screen and (max-width: $desktop-limit) {
		left: 2rem;
		right: 2rem;
		width: auto;
	}
}

.ui-dialog {
	@media screen and (max-width: $desktop-limit) {
		left: 2rem;
		right: 2rem;
		width: auto;
	}
}

div.crosshair {
	&::before {
		font-family: FontAwesome;
		content: "\f05b";  // crosshair
		color: $red;
		width: 40px;
		height: 40px;
		line-height: 40px;
		display: inline-block;
		text-align: center;
		font-size: 2.5rem;
		position: relative;
		top: -20px;
		left: -20px;
	}
}

ul#evolutions span.user {
	display: none;
}

.gru-content div.cell.textcell.editorial {
	padding: 2rem 4rem;
	line-height: 140%;
	@media screen and (max-width: $desktop-limit) {
		padding: 0;
	}
	h1 {
		margin: 1rem 0.5rem;
	}
	h2,
	h2:first-child {
		position: static;
		text-align: left;
		font-family: $font-family;
		font-size: 1.5rem;
		background: transparent;
		color: #333;
		font-weight: bold;
		text-transform: uppercase;
		padding: 0;
		margin: 1rem 0;
	}
	a {
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}
}

div.textcell.backlink {
	display: none;
}

div.ui-widget-overlay {
	opacity: 0.8;
}

#drafts-section, #forms-section {
	display: none;
}

@media screen and (max-width: $desktop-limit) {
	body.focus-in .site-nav {
		display: none;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.img-max-width {
	max-width: 100%;
}

.pl-liste-communes ul {
	@media screen and (min-width: $desktop-limit) {
		column-count: 3;
	}
}

.comment-field img.aside {
	float: left;
	margin: 0 1em 1em 0;
	@media screen and (max-width: $desktop-limit) {
		display: block;
		float: none;
		margin: 0 auto;
		max-width: 90%;
	}
}
