$homepage-header-links:
	"signalements" "picto-signalements" $light-green,
	"demarches" "picto-demarches" $cyan,
	"connexion" "picto-connexion" $orange,
;

$cells-backgrounds:
	"dark-blue" $dark-blue,
	"dark-gray" $dark-gray,
	"red" $red,
	"violet" $violet,
	"cyan" $cyan,
	"orange" $orange,
	"light-green" $light-green,
	"green" $green,
	"purple" $purple,
	"blue" $blue
;

html {
	@media ($max-mobile-viewport) {
		font-size: 16px;
	}
}


%title {
	@media ($max-mobile-viewport) {
		font-size: 1.5em;
	}
}

//
//	Typo
//

h1 {
	font-size: $fz-h1;
	font-weight: 800;
	line-height: 1.1;
}
h2 {
	font-size: $fz-h2;
	font-weight: 700;
}


main {
	background: url('img/grille_points_bleu.svg') left top no-repeat,
				url('img/grille_points_orange.svg') right bottom no-repeat;
}

%button {
	@extend %button;
	font-weight: bold;
	text-transform: uppercase;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

%custom-radio-checkbox-widget {
	@extend %custom-radio-checkbox-widget;
	input {
		&[type="checkbox"] + span::before {
			border-radius: 3px;
		}
		+ span {
			&::before {
				top: 0.22rem;
				height: 0.9rem;
				width: 0.88rem;
				border: 2px solid $widget-custom-radio-checkbox-border-color;
			}
			&::after {
				height: calc(0.9rem - 4px);
				width: calc(0.88rem - 4px);
				top: calc(0.22rem + 4px);
				left: 4px;
			}
		}
	}
}

.rounded-corners {
	border-radius: 1.5em;
}

strong {
	font-weight: 600;
}

#logo.has-logo {
	height: 120px;
	display: flex;
	@media ($max-mobile-viewport) {
		padding-left: 0.5em;
	}
	@media (max-width: $very-small-limit) {
		padding-left: 0;
	}
}

.lso-page-header {
	height: 510px;
	background: url('/assets/banner:background') center no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2em;
	&--default {
		width: $width;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		h1 {
			text-transform: uppercase;
			position: relative;
			&::after {
				position: absolute;
				bottom: -0.25em;
				left: calc(50% - 0.75em);
				content:"";
				width: 1.5em;
				height: 6px;
				background-color: #fff;
				display: block;
				border-radius: 1em 0 1em 0;
			}
		}
	}
	@media ($max-mobile-viewport) {
		height: 350px;
	}
}

.lso-home--wrapper {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: -460px;
	background: url('img/logo.svg') top right no-repeat;
	padding-top: 280px;
	margin-bottom: 2em;
	@media ($max-mobile-viewport) {
		background: url('img/logo.svg') top center no-repeat;
		background-size: auto 230px;
		padding-top: 230px;
		margin-top: -350px;
	}
	@media (max-width: 460px) {
		background-size: contain;
	}
	div.linkcell {
		padding: 0.5em;
		li {
			width: 228px;
			height: 228px;
			border-radius: 50%;
			margin: 0 0.75em;
			display: flex;
			justify-content: center;
			@media ($max-mobile-viewport) {
				width: 160px;
				height: 160px;
			}
		}
		a {
			color: #fff;
			font-weight: bold;
			align-items: center;
			&:hover {
				background: transparent;
			}
		}
		@each $name, $img, $background in $homepage-header-links {
			&.lien-#{$name} li {
				background: #{$background};
				border: 3px solid #{$background};
				a {
					background: url('img/#{$img}.svg') center 25% no-repeat;
					padding-top: 3em;
					@media ($max-mobile-viewport) {
						background-size: auto 3em;
					}
				}
				&:hover {
					background: #fff;
					a {
						color: #{$background};
						background: url('img/#{$img}-hover.svg') center 25% no-repeat;
						@media ($max-mobile-viewport) {
							background-size: auto 3em;
						}
					}
				}
			}
		}
	}
}

h1.has-logo a {
	width: 260px;
}

#top {
	@media ($min-desktop-viewport) {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

//
// Nav
//
div.gru-nav {
	ul li {
		@media (max-width: $nav-mobile-limit) {
			text-align: center;
		}
		margin: 0 0.5em;
		&:last-child a {
			@extend %button;
			margin: 0;
		}
		a.registration {
			&:hover::after {
				background: url('img/fleche-hover.svg') center no-repeat;
			}
			&::after {
				margin-left: 0.4em;
				content: '';
				background: url('img/fleche.svg') center no-repeat;
				width: 1em;
				height: 0.8em;
				display: inline-block;
				vertical-align: middle;
			}
		}
		@media (max-width: $nav-mobile-limit) {
			a.account-link {
				display: none;
			}
		}
	}
	.gru-nav-button {
		border-radius: 50%;
		position: absolute;
		right: 3em;
		top: 2em;
		@media (max-width: $nav-mobile-limit) {
			+ ul {
				margin-top: 2em;
				padding-bottom: 1em;
				a {
					width: auto;
				}
			}
		}
		.icon-bar {
			width: 50%;
			left: 25%;
			&-1 {
				top: 30%;
			}
			&-2 {
				top: 50%;
			}
			&-3 {
			top: 70%;
			}
		}
		&.toggled {
			background: transparent;
			+ ul {
				margin-top: 4em;
			}
			.icon-bar {
				background-color: $primary-color;
			}
		}
	}
}

.pwa-navigation {
	padding: 1em 0;
	div > ul li a {
		text-transform: uppercase;
		font-weight: 600;
		display: flex;
		align-items: center;
		background-position: 50% 5px;
		background-size: auto calc( #{$nav-mobile-bottom-bar-height / 2} - 5px );
		span {
			height: auto;
			width: 100%;
			font-size: $fz-small;
		}

	}
	@media ($max-mobile-viewport) {
		left: 0;
	}
	@media ($min-desktop-viewport) {
		position: static;
		background-color: white;
		div > ul li {
			a, &.selected a, &.selected:hover a, &:hover a {
				color: $cyan;
				background-color: transparent
			}
			a {
				color: $violet;
			}
		}
	}
}

//
// Content
//

.gru-content {
	div.wcsformsofcategorycell {
		h2:first-child {
			background: $orange;
			color: #fff;
			border-radius: 0.5em;
			text-transform: uppercase;
		}
		li {
			box-shadow: $widget-box-shadow;
			border-radius: 1em;
			margin: 1em 0;
			a {
				color: $orange;
				font-size: 1.5em;
				padding-left: 2.5em;
				justify-content: space-between;
				&::after {
					content: '\f0a9'; /* fa-arrow-right */
					font-family: FontAwesome;
					font-size: 1.5em;
				}
			}
		}
	}
	div.trackingcodeinputcell {
		color: #fff;
		background: $cyan;
		padding: 1.5em;
		@extend .rounded-corners;
		input {
			@extend .rounded-corners;
			color: #fff;
			background: transparent;
			border: 2px solid #fff;
			margin: 0 1em;
			box-shadow: none;
		}
		button {
			background-image: url('img/fleche.svg');
			background-position: 95% 50%;
			background-repeat: no-repeat;
			padding-right: 1.75em;
			&:hover {
				background-image: url('img/fleche-hover.svg');
			}
		}
	}
	div.cell--title {
		font-size: 1.4em;
		background: url('img/suivez-votre-demarche.svg') center left no-repeat;
		padding-left: 3em;
		margin: 0.25em 0;
		div {
			line-height: 1em;
			&:first-child {
				font-size: 2.4em;
				font-weight: bold;
			}
		}
		@media (max-width: $very-small-limit) {
			div:first-child {
				font-size: 2em;
			}
			padding-left: 3.5em;
		}
	}
	div.wcs-tracking-code-input {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		@media ($max-mobile-viewport) {
			justify-content: center;
			form * {
				margin: 0.5em 0;
			}
		}
		@media (max-width: $very-small-limit) {
			form * {
				width: 100%;
			}
		}
	}
	div.linkcell, div.linklistcell {
		ul li a {
			font-size: 1.3em;
			&:hover {
				font-weight: bold;
			}
		}
		&.has-asset-picture {
			h2, a {
				display: flex;
				align-items: center;
				div, span {
					width: 2.5em;
					height: 2.5em;
					display: inline-block;
					border-radius: 50%;
					border: 2px solid #fff;
					background-size: cover;
					background-position: center;
					margin-right: 0.5em;
					flex-shrink: 0;
				}
			}
		}
	}
	div.linklistcell {
		border-radius: 1.5em;
		background: $primary-color;
		h2:first-child {
			color: #fff;
			text-transform: uppercase;
			line-height: 1em;
		}
		ul {
			padding-bottom: 0.5em;
			&::before {
				content: '';
				height: 2px;
				display: block;
				background: rgba(255, 255, 255, 0.15);
				margin: 0 1.5em;
			}
		}
		li a {
			color: #fff;
			background: url('img/fleche-d.svg') center left no-repeat;
			margin-left: 1.5em;
			padding-left: 1.5em;
			&:hover {
				color: #fff;
				background: transparent url('img/fleche-d-bold.svg') center left no-repeat;
			}
		}
	}
}

textarea {
	border-radius: 1em;
}

div#columns > div.trackingcodeinputcell:first-child {
	margin-top: -6em;
}

div.cell.foldable {
	> div > h2:first-child {
		padding-right: 1.75em;
		&::after {
			top: calc(50% - 0.5em);
			right: 0.5em;
			content: '';
			width: 1em;
			height: 1em;
			display: block;
			background-image: url('img/fleche-haut.svg');
			background-position: center;
			background-repeat: no-repeat;
		}
	}
	&.folded > div > h2:first-child::after {
		content: '';
		background-image: url('img/fleche-bas.svg');
	}
}

@each $name, $background in $cells-backgrounds {
	div.cell.#{$name}-bg {
		background-color: #{$background};
		color: #fff;
		div.links-list ul > li > a {
			color: #fff;
			&:hover {
				background: transparent;
			}
		}
	}
}

label {
	color: $orange;
}

div.widget-with-error {
	label {
		color: $red;
	}
	div.content {
		input, select, textarea  {
			border: 1px solid $red;
			background: rgba(255, 0, 0, 0.2);
		}
	}
}

div.submit-button button, .gru-content button.submit-button {
	background: #ffff;
	color: $orange;
}

.form-content--title {
	background: $orange;
	color: #fff;
	border-radius: 20px;
}

div#side {
	background: $cyan;
	display: flex;
	border-radius: 10px;
	padding: 0.5em 2em;
	justify-content: space-between;
	align-items: center;
}

div#tracking-code {
	div.tracking-code-part {
		background-image: url('img/suivez-votre-demarche.svg');
		background-position: center left;
		background-repeat: no-repeat;
		padding-left: 4.5em;
	}
	&.has-discard-button {
		form {
			margin: 0;
			display: flex;
			justify-content: center;
		}
	}
	h3, a {
		text-transform: uppercase;
		color: #fff;
		display: inline-block;
	}
	a {
		@extend .rounded-corners;
		border: 1px solid #fff;
		@media (min-width: $very-small-limit + 1) {
			margin-left: 2em;
		}
	}
}

div#tracking-code, .wcs-steps {
	margin: 0;
}

div#gauche div#tracking-code a {
	padding: 0 0.5em;
}

// Steps
.wcs-steps h2 {
	@extend h3;
	font-weight: bold;
	display: block;
	text-transform: uppercase;
	margin: 0;
	color: #fff;
	line-height: 1.2em;
	@media ($max-mobile-viewport) {
		text-align: center;
	}
}

.wcs-step {
	margin: 0;
	@media ($max-mobile-viewport) {
		justify-content: center;
	}
	&--marker {
		width: auto;
		font-size: 1.2em;
	}
}

.wcs-steps {
	@media (min-width: $very-small-limit + 1) {
		max-width: 40%;
	}
	&--list {
		margin-top: -1em;
	}
}

#footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	@media ($max-mobile-viewport) {
		justify-content: center;
	}
	a {
		font-size: 1em;
		font-weight: bold;
	}
}

// Footer

#footer-wrapper {
	padding-top: 2em;
}

.footer-logo {
	text-align: center;
	img {
		width: 250px;
		height: auto;
	}
	@media ($min-desktop-viewport) {
		float: left;
		height: 100%;
		margin-right: 1.5rem;
	}
}

.footer-post {
	background: #022d55;
	text-align: center;
	color: #fff;
	padding: 0.5em 0;
	font-size: 0.8em;
	a {
		color: #fff;
	}
}

// Misc

a.orange-link,
div.linkcell.orange-link div.links-list ul > li > a {
	color: $orange;
	text-decoration: underline;
	&:hover {
		color: $dark-blue;
		background-color: transparent;
	}
}

.cyan-button {
	@extend %button;
	background: $cyan;
	border: 0;
	&:hover {
		color: $cyan;
		background: #fff;
	}
}

a.cyan-button,
div.linkcell.cyan-button div.links-list ul > li > a {
	@extend .cyan-button;
}

div#stores {
	color: #fff;
	background: url('/assets/stores:background') center no-repeat;
	h2 {
		margin: 0;
		line-height: 1em;
	}
	a {
		@extend .cyan-button;
		display: inline-block;
		white-space: nowrap;
	}
}
