$remote-font-path: 'https://montoulouse.eservices.toulouse-metropole.fr/static/_fonts/';

@mixin aauxpro-font($type, $weight) {
	@font-face {
		font-family: 'AauxPro';
		src: url('#{$remote-font-path}aauxpro-#{$type}.woff') format('woff'),
			url('#{$remote-font-path}aauxpro-#{$type}.ttf') format('truetype');
		font-weight: $weight;
	}
}

@include aauxpro-font('thin', 100);
@include aauxpro-font('regular', 400);
@include aauxpro-font('medium', 500);
@include aauxpro-font('bold', 700);

$header-height: 164px;
$nav-width: 156px;
$intro-height: calc(100vh - 150px);

div.a2-block, div.block,
.gru-content div.cell {
	overflow: visible;
}

a:hover {
	text-decoration: underline;
}

%button {
	@extend %button;
	font-weight: bold;
	padding: 1rem 2rem;
	&.inverse {
		color: $orange;
		background: white;
		&:hover {
			color: white;
			background: $orange;
		}
	}
	&:hover {
		text-decoration: none;
	}
}

%custom-radio-checkbox-widget {
	input + span {
		&::before {
			border: none;
			box-shadow: 0 0 6px 0px #505050;
		}
		&::after {
			left: 0;
			top: calc(0.33em - 1px);
			height: calc(0.66rem);
			width: calc(0.66rem);
		}
	}
}

header {
	position: absolute;
	top: 0;
	left: $nav-width;
	right: 0;
	background: transparent;
	z-index: 999;
	#logo {
		background: url(img/header/logo-header.png) center center no-repeat;
		text-indent: -10000px;
		height: $header-height;
		width: 287px;
		margin: 0 auto;
		a {
			display: block;
			width: 207px;
			height: $header-height;
		}
	}
	@media screen and ($max-mobile-viewport) {
		left: 0;
		#logo {
			padding: 0;
		}
	}
	#toplinks {
		display: none;
	}
}

.site-nav {
	position: fixed;
	height: 100%;
	top: 0;
	left: 0;
	background: #6a5f5b;
	color: white;
	font-size: 0.846rem;
	width: $nav-width;
	text-transform: uppercase;
	z-index: 150;
	#nav-wrapper {
		position: relative;
		z-index: 10;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	&::after {
		box-shadow: 0 0 5px black;
		z-index: 0;
		position: fixed;
		content: "";
		display: block;
		background: transparent;
		pointer-events: none;
		width: $nav-width;
		top: 0;
		height: 100vh;
		@media screen and ($max-mobile-viewport) {
			content: none;
		}
	}
	div#nav {
		height: 100%;
		ul li {
			width: 100%;
			text-align: center;
			margin-bottom: 20px;
			a {
				padding-top: 60px;
				background: transparent 50% 25px no-repeat;
				@media screen and ($min-desktop-viewport) {
					span {
						transition: transform linear 0.1s;
						display: block;
					}
					&:hover span {
						transform: scale(1.2);
					}
				}
				@media screen and ($max-mobile-viewport) {
					background: transparent 50% 10px no-repeat;
					padding-top: 45px;
					span {
						display: inline;
						font-size: 0.846rem;
					}
				}
			}
			&.menu-particuliers a,
			&.menu-particuliers.selected a,
			&.menu-particuliers a:hover {
				background-image: url(img/menu/menu-particuliers.png);
			}
			&.menu-associations a,
			&.menu-associations.selected a,
			&.menu-associations a:hover {
				background-image: url(img/menu/menu-associations.png);
			}
			&.menu-professionnels a,
			&.menu-professionnels.selected a,
			&.menu-professionnels a:hover {
				background-image: url(img/menu/menu-professionnels.png);
			}
			ul {
				display: none;
			}
			&.selected a,
			&:hover a {
				@media screen and ($max-mobile-viewport) {
					background: transparent 50% 10px no-repeat;
				}
			}
		}
	}
	@media screen and ($max-mobile-viewport) {
		position: fixed;
		height: $nav-mobile-bottom-bar-height;
		top: auto;
		width: 100%;
	}
}

#side-user-block {
	padding: 20px 10px;
	a.login {
		display: block;
		width: 100%;
		text-align: center;
		background: $orange url(img/header/icone-connexion.png) left center no-repeat;
		padding-left: 45px;
	}
	span.registration {
		display: block;
		padding-top: 10px;
		text-transform: none;
		font-weight: bold;
		text-align: center;
		a {
			text-decoration: underline;
		}
	}
	a.logout {
		display: block;
		width: 100%;
		text-align: center;
	}
	span.connected-user {
		display: block;
		text-align: center;
		color: white;
		margin-bottom: 10px;
	}
}

footer {
	z-index: 200;
	box-shadow: 0 0 10px #666;
	margin-left: $nav-width;
	@media screen and ($max-mobile-viewport) {
		margin-left: 0;
	}
	#footer-wrapper {
		padding-bottom: 0;
		background: transparent;
	}
	div.trackingcodeinputcell,
	div.feedcell {
		display: none;
	}
	@media screen and ($max-mobile-viewport) {
		box-shadow: none;
		#footer-wrapper {
			padding-top: 0;
		}
		div.trackingcodeinputcell {
			display: block;
			background: #554b49;
			padding-bottom: 10px;
			margin-bottom: 20px;
			color: white;
			border-top: 5px solid $violet;
			text-align: center;
			h2 {
				text-transform: uppercase;
				margin-bottom: 0;
			}
			form {
				margin-top: 0;
			}
			p {
				display: none;
			}
			input {
				background: transparent;
				color: white !important;
				border: 0;
				border-bottom: 1px solid #66606b;
			}
			button {
				border: 0;
				cursor: pointer;
				background: url(img/menu/menu-validation.png) center center no-repeat;
				text-indent: -1000px;
				height: 43px;
				width: 43px;
			}

		}
		div.textcell img {
			display: block;
			margin: auto;
		}
	}
}

#page {
	// simulate left black band (may be replaced by a data uri PNG)
	background: linear-gradient(to right, #2e2d35 0%, #2e2d35 $nav-width, white $nav-width);
	@media screen and ($max-mobile-viewport) {
		background: none;
	}
}

div#main-content-wrapper {
	padding-left: $nav-width;
	flex: unset;
	@media screen and ($max-mobile-viewport) {
		padding-left: 0;
	}
}

div#main-content br:last-child {
	display: none;
}

div#main-content div.timetable-widget br:last-child {
	display: block;
}

.page-template-homepage .gru-content {
	display: block;
}

section {
	padding: 2rem;
	@media screen and ($max-mobile-viewport) {
		padding: 2rem 1rem;
	}
}

section#intro {
	min-height: $intro-height;
	background: url(img/header/img_ville_background_header.jpg) top center no-repeat;
	background-size: cover;
	box-shadow: 0 4px 8px #ccc;
	@media screen and ($max-mobile-viewport) {
		min-height: 0;
		padding-top: 120px;
	}
}

section#section-particuliers,
section#section-associations,
section#section-professionnels {
	background: white;
	color: #27252f;
	position: relative;
	h1:first-child {
		font-size: 2.462rem;
		font-weight: 600;
		margin-bottom: 3rem;
		@media screen and (max-width: 380px) {
			font-size: 1.846rem;
		}
		&::before {
			content: "";
			display: inline-block;
			background: white center center no-repeat;
			width: 45px;
			height: 45px;
			border-radius: 100%;
			box-shadow: 0 0 5px 5px #ccc;
			position: relative;
			top: 12px;
			margin-right: 20px;
		}
		&::after {
			content: "";
			background: $violet;
			height: 4px;
			width: 45px;
			display: block;
			margin-top: 20px;
		}
		+ a {
			position: absolute;
			top: -4rem;
			@media screen and ($max-mobile-viewport) {
				top: -2rem;
			}
		}
	}
}

section#section-particuliers {
	min-height: 400px;
	h1:first-child {
		&::before {
			background-image: url(img/home/home-particuliers/picto-particuliers.png);
		}
		position: absolute;
		@media screen and ($max-mobile-viewport) {
			position: static;
		}
	}
	h1 + div.link-list-cell,
	h1 + div.wcsformsofcategorycell {
		margin-top: 70px;
	}
	div.forms {
		margin-left: 400px;
		@media screen and ($max-mobile-viewport) {
			margin-left: 0;
		}
	}
	div.search-results,
	div.link-list-cell,
	div.wcsformsofcategorycell {
		background: transparent;
		margin-left: 0px;
		margin-bottom: 0;
		width: 400px;
		border: none;
		@media screen and ($max-mobile-viewport) {
			margin: 0;
			width: auto;
		}
		div.intro {
			display: none;
		}
		ul {
			display: none;
		}
		h2 {
			background: #6A5F5B;
			border-radius: 5px;
			color: #fff;
			font-size: 1rem;
			text-transform: uppercase;
			cursor: pointer;
			padding-top: 2px;
			padding-bottom: 2px;
			padding: 2rem;
			box-shadow: 0px 0px 5px #333;
			z-index: 100;
			> span {
				display: inline-block;
				background-position: 0px center;
				background-repeat: no-repeat;
				font-weight: bold;
				@media screen and ($max-mobile-viewport) {
					background-position: 10px center;
				}
				> span {
					display: inline-block;
					line-height: 14px;
					vertical-align: middle;
				}
			}
			i.opener {
				display: none;
			}
			&::before {
				content: '';
				display: block;
				height: 23px;
				width: 19px;
				position: absolute;
				left: -8px;
				top: 20px;
			}
			@media screen and ($max-mobile-viewport) {
				margin-top: 2ex;
				i.opener {
					background-image: url(img/FlecheBas.png);
				}
			}
		}
		position: relative;
		ul {
			padding: 20px 30px;
			position: absolute;
			background: white;
			left: 400px;
			top: -30px;
			width: 300px;
			z-index: 20;
			border-radius: 10px;
			box-shadow: 0 0 5px black;
			li {
				a {
					border: none;
					color: $dark-link-color;
					background: url(img/home/home-particuliers/fleche-rose.png) 10px 50% no-repeat;
					padding-left: 30px;
					padding-right: 10px;
					&:hover {
						text-decoration: none;
						background-color: #eee;
					}
					&::after {
						// don't mark forms requiring authentication
						content: none;
					}
				}
			}
			&::before {
				content: '';
				display: block;
				height: 22px;
				width: 23px;
				position: absolute;
				left: -10px;
				top: 42px;
			}
			@media screen and ($max-mobile-viewport) {
				border-radius: 0 0 10px 10px;
				position: static;
				left: auto;
				top: auto;
				width: auto;
				&::before {
					content: none;
				}
			}
		}
		@media screen and ($max-mobile-viewport) {
			.opened {
				h2 {
					background: $orange;
					border-radius: 5px 5px 0 0;
				}
				ul {
					display: block;
				}
			}
		}
		@media screen and (min-width: #{$mobile-limit - 1px}) {
			&:hover {
				h2 {
					background: $orange url(img/home/home-particuliers/fleche_blanche_hover.png) top 50% right 20px no-repeat;
					border-radius: 5px 30px 30px 5px;
					margin-right: -30px;
				}
				ul {
					display: block;
				}
			}
		}
	}

	div#search {
		position: absolute;
		top: 170px;
		max-width: 320px;
		@media screen and ($max-mobile-viewport) {
			position: static;
		}
		h3 {
			text-transform: uppercase;
			font-size: 1.231rem;
			line-height: 135%;
		}
		p {
			font-weight: bold;
		}
		form {
			display: flex;
			input {
				flex: 1;
				background: white;
			}
			button {
				border: none;
				height: 43px;
				width: 43px;
				margin-right: 0;
				box-shadow: none;
				background: url(img/home/home-particuliers/valider.png) center center no-repeat;
			}
		}
	}
	div.search-results {
		display: none;
		padding-top: 1rem;
		p.no-hits {
			background: white;
			border-radius: 10px;
			box-shadow: 0 0 5px black;
			color: black;
			padding: 1rem;
			margin: 0;
		}
		ul {
			display: block;
			position: static;
			&::before {
				content: none;
			}
		}
	}
}

section#section-associations {
	background: #e4dccf;
	h1:first-child {
		&::before {
			background-image: url(img/home/home-associations/picto-associations.png);
		}
	}
}

section#section-professionnels {
	background: white;
	h1:first-child {
		&::before {
			background-image: url(img/home/home-professionnels/picto-professionnels.png);
		}
	}
}

section#section-associations,
section#section-professionnels {
	div.wcsformcell {
		background: transparent;
		display: inline-block;
		border: none;
		margin-right: 3rem;
		margin-bottom: 3rem;
		@media screen and ($max-mobile-viewport) {
			margin-right: 10px;
		}
		a {
			text-transform: uppercase;
			font-weight: bold;
			width: 20vw;
			@media screen and ($max-mobile-viewport) {
				width: 85vw;
			}
			display: inline-block;
			padding: 2rem;
			padding-right: 50px;
			background: #fff;
			color: $dark-link-color;
			border-radius: 40px;
			box-shadow: 0 0 4px #45434c;
			font-size: 1rem;
			&::before {
				content: '';
				position: absolute;
				display: block;
				width: 19px;
				height: 23px;
				left: -8px;
				top: calc(50% - 10px);
			}
			&::after {
				content: '';
				position: absolute;
				display: block;
				background: url(img/home/home-associations/chevron-fond-orange.png) top right no-repeat;
				width: 48px;
				height: 48px;
				right: 10px;
				top: calc(50% - 24px);
			}
			&:hover {
				background: #6a5f5b;
				text-decoration: none;
				color: white;
				&::after {
					background-image: url(img/home/home-associations/chevron-fond-blanc.png);
				}
			}
		}
	}
}

#vos-services-en-ligne {
	margin: 120px auto 0 auto;
	max-width: 50rem;
	text-align: center;
	> div {
		margin: 0;
	}
	border: none;
	background: transparent;
	color: white;
	font-size: 1.308rem;
	font-weight: bold;
	h1 {
		padding-top: 50px;
		color: white;
		font-size: 5rem;
		letter-spacing: 4px;
		margin: 0;
		margin-bottom: 50px;
		&::after {
			content: "";
			display: block;
			height: 5px;
			width: 56px;
			position: absolute;
			margin-top: 20px;
			left: calc(50% - 28px + #{$nav-width / 2});
			background: white;
			@media screen and ($max-mobile-viewport) {
				left: calc(50% - 28px);
			}
		}
	}
	p {
		margin-left: 0;
		line-height: 1.8;
	}
	@media screen and ($max-mobile-viewport) {
		margin: 10px;
		text-align: center;
		width: auto;
		h1 {
			font-size: 3.077rem;
		}
		h2 {
			font-size: 1.538rem;
		}
	}
	a.pk-button {
		display: inline-block;
		width: 14.5em;
		margin: 0 1rem;
		@media screen and ($max-mobile-viewport) {
			margin: 1rem 0;
			width: 90%;
		}
	}
}

#intro {
	#encart-inscription {
		> div {
			margin: 0;
		}
		&::before {
			content: '';
			display: block;
			width: 58px;
			height: 58px;
			background: url(img/home/inscription-accueil/home-utilisateur.png);
			position: absolute;
			top: -29px;
			left: calc(50% - 29px);
		}
		box-sizing: content-box;
		padding-top: 30px;
		background-color: #ebebeb;
		border-radius: 9px;
		position: absolute;
		width: 300px;
		right: 150px;
		top: 220px;
		text-align: center;
		@media screen and (max-width: 1500px) {
			right: 80px;
		}
		@media screen and ($max-mobile-viewport) {
			margin: 2rem 0;
			position: relative;
			right: auto;
			top: auto;
			width: auto;
		}
		h3 {
			text-transform: uppercase;
			font-weight: bold;
			font-size: 1.385rem;
			letter-spacing: 3px;
		}
		p {
			font-size: 1rem;
			padding: 0 1rem;
		}
		a {
			text-decoration: underline;
			&:hover {
				color: #333;
			}
		}
		a#creer-mon-compte {
			margin-left: 10%;
			display: block;
			background: url(img/home/inscription-accueil/plus.png) left center no-repeat;
			padding-left: 50px;
			height: 60px;
			text-align: left;
			text-transform: uppercase;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
			margin-right: 10%;
			padding-top: 24px;
			font-weight: bold;
		}
	}
}

#footer {
	div.menucell {
		text-align: center;
		li {
			display: inline-block;
			a {
				border: none;
				font-size: 0.769rem;
				text-transform: uppercase;
				color: #333;
				background: inherit;
				@media screen and ($max-mobile-viewport) {
					padding-top: 0;
					padding-bottom: 0;
					margin-bottom: 1ex;
					border-right: 1px solid #666;
				}
			}
			&:last-child a {
				@media screen and ($max-mobile-viewport) {
					border-right: 0;
				}
			}
		}
	}
}

div#title-section {
	position: relative;
	overflow: hidden;
	background: $violet url(img/header/img_ville_background_header_pageinter.jpg) top center no-repeat;
	background-size: cover;
	padding: 170px 50px 100px 100px;
	font-size: 1.231rem;
	font-weight: bold;
	@media screen and ($max-mobile-viewport) {
		padding: 150px 1rem 1rem 1rem;
	}
	color: white;
	p.category-name {
		height: 35px;
		line-height: 35px;
		font-size: 1.154rem;
		text-transform: uppercase;
		font-weight: bold;
	}
	h1 {
		margin-top: 0;
		font-size: 4.231rem;
		letter-spacing: 4px;
		line-height: 100%;
		margin-right: 160px;
		position: relative;
		&::after {
			content: "";
			position: absolute;
			height: 5px;
			width: 56px;
			bottom: -20px;
			left: 0;
			background-color: #fff;
		}
		@media screen and ($max-mobile-viewport) {
			margin-right: 0;
		}
	}
	div#temps-de-reponse {
		position: absolute;
		right: 80px;
		top: 150px;
		width: 50px;
		text-align: center;
		background: white;
		border-radius: 5px;
		padding: 10px 0;
		span {
			display: block;
			color: #6b5f5a;
			font-size: 1rem;
			padding-top: 45px;
			background: url(img/formulaire/picto-reveil.png) top center no-repeat;
		}
		@media screen and ($max-mobile-viewport) {
			position: relative;
			right: auto;
			top: -10px;
			display: inline-block;
			width: auto;
			padding: 0;
			margin-bottom: 20px;
			span {
				background-position: 5px 50%;
				padding: 10px 5px 10px 40px;
			}
		}
	}
	& > div {
		margin: 0;
	}
}

div#content div#buttons-section {
	background: $violet url(img/standard/img_background_footer_contenus.jpg) top center no-repeat;
	background-size: cover;
	padding: 2rem 1rem;
	overflow: hidden;
	margin: -10px 100px 3rem 100px;
	box-shadow: 0 0 5px #ccc;
}

div#title-section,
div#title-section ~ div.encart {
	& + div.textcell {
		background: transparent;
		> div {
			margin-top: -70px;
			background: white;
			position: relative;
			z-index: 100;
			padding: 60px 60px;
			box-shadow: 0 0 5px #ccc;
		}
		&.encart > div {
			background: #6c5e5b;
			padding: 20px;
		}
	}
}

div#buttons-section {
	& > div {
		margin: 0;
	}
}

section#section-professionnels {
	div.wcsformcell {
		a {
			&::before {
			}
		}
	}
}

div#gauche {
	box-shadow: 0 0 5px #ccc;
	position: relative;
	margin: 0 100px 0 100px;
	@media screen and ($max-mobile-viewport) {
		margin: 0;
	}
	div#tracking-code {
		position: absolute;
		top: -100px;
		&.has-discard-button {
			top: -180px;
			button {
				margin: 0 0 0.5em 0;
			}
		}
		@media screen and ($max-mobile-viewport) {
			text-align: center;
			position: static;
			width: 80%;
			margin: 0 auto 1rem auto;
		}
		right: 10px;
		background: white;
		border-radius: 5px;
		h3, a {
			background: transparent;
			color: #6b5f5a;
		}
	}
}

div#gauche + div#rub_service {
	margin-top: -30px;
	position: relative;
	z-index: 10;
}

div#title-section + div#rub_service {
	margin-top: -45px;
	position: relative;
	z-index: 10;
	padding-top: 30px;
	@media screen and ($max-mobile-viewport) {
		margin-top: 0;
	}
}

div#rub_service {
	margin: 0 100px 50px 100px;
	@media screen and ($max-mobile-viewport) {
		margin: 0 0 50px 0;
	}
}

#steps {
	h2 {
		display: none;
	}
	margin-top: -55px;
	background: white;
	ol {
		list-style-type: none;
		padding: 0;
		margin: 0;
		position: relative;
		top: -30px;
		text-align: left;
		display: flex;
		li {
			position: relative;
			padding: 0 1rem;
			&.first {
				padding-left: 60px;
				@media screen and ($max-mobile-viewport) {
					padding-left: 0;
				}
			}
			flex: 1;
			text-align: center;
			.marker {
				display: inline-block;
				padding: 0;
				width: 52px;
				height: 52px;
				line-height: 52px;
				font-size: 1.538rem;
				border-radius: 100%;
				color: #333;
				border: 2px solid $primary-color;
				background: white;
				z-index: 100;
				position: relative;
				font-weight: bold;
			}
			&.step-before,
			&.current {
				background: transparent;
				span.marker {
					background: #6a5f5b;
					border-color: #6a5f5b;
					border-radius: 100%;
					color: white;
				}
			}
			.label {
				padding-top: 10px;
				display: block;
				font-weight: bold;
			}
			&::before {
				display: block;
				position: absolute;
				top: 28px;
				left: 0;
				width: 100%;
				height: 3px;
				background: #4d4d55;
				z-index: 50;
			}
			&.current::before {
				content: '';
				width: 50%;
			}
			&.step-before::before {
				content: '';
			}
		}
		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 28px;
			width: 100%;
			height: 3px;
			background: #c5c4c2;
		}
	}
	&.steps-10, &.steps-11, &.steps-12, &.steps-13, &.steps-14, &.steps-15,
	&.steps-16, &.steps-17, &.steps-18, &.steps-19, &.steps-20, &.steps-21,
	&.steps-22, &.steps-23, &.steps-24, &.steps-25, &.steps-26, &.steps-27,
	&.steps-28, &.steps-29, &.steps-30, &.steps-31, &.steps-32, &.steps-33 {
		margin-top: -45px;
		ol {
			li {
				min-width: auto;
				width: 2rem;
				span.label {
					display: none;
				}
				&.current {
					span.label {
						display: block;
						width: 10rem;
						margin-left: -1rem;
					}
				}
			}
		}
	}
	@media screen and ($max-mobile-viewport) {
		ol {
			li {
				min-width: none;
				max-width: none;
				width: 100%;
				&.step-after,
				&.step-before {
					display: none;
				}
			}
		}
	}
}

div#rub_service {
	box-shadow: 0 10px 5px #ccc;
	font-size: 1.308rem;
	div.form-validation > div.infonotice,
	div.drafts-recall,
	form {
		margin: 0 100px;
		@media screen and ($max-mobile-viewport) {
			margin: 0 10px;
		}
		padding: 0;
	}
	div.form-validation > div.infonotice {
		background: white;
		box-shadow: 0 3px 5px 5px #ccc;
		border-radius: 10px;
		padding: 1rem 1rem 1rem 4rem;
		margin-bottom: 2rem;
		color: $font-color;
		@media screen and ($max-mobile-viewport) {
			padding: 0rem 1rem 0rem 4rem;
		}
	}

	form {
		> h3, > h4, > div, > p.comment-field {
			@media screen and ($max-mobile-viewport) {
				padding: 0 1rem;
			}
		}
		h3 {
			font-size: 1.769rem;
			text-transform: uppercase;
			margin-bottom: 3rem;
			&::after {
				content: '';
				display: block;
				margin-top: 10px;
				height: 3px;
				width: 20px;
				background: $orange;
			}
		}
		div.page h3 {
			border: none;
		}
		div.widget div.title {
			font-size: 1.231rem;
		}
		> div.buttons {
			margin: 0 -100px;
			background: $violet url(img/standard/img_background_footer_contenus.jpg) top center no-repeat;
			background-size: cover;
			padding: 4rem 4rem 3rem 4rem;
			@media screen and ($max-mobile-viewport) {
				margin: 0 -10px;
				padding: 2rem 1rem 1rem 1rem;
			}
			display: flex;
			flex-wrap: wrap;
			column-gap: 1rem;
			justify-content: space-between;
			.savedraft-button {
				display: none;
			}
			div.widget {
				margin: 0 1rem;
				text-transform: uppercase;
				@media screen and ($max-mobile-viewport) {
					margin: 0;
					&.previous-button {
						margin-left: 1ex;
					}
				}
			}
			button {
				margin-bottom: 1rem;
			}
			div.cancel-button {
				visibility: hidden;
			}
			div.previous-button + div.cancel-button {
				display: none;
			}
			button {
				min-width: 200px;
				@media screen and ($max-mobile-viewport) {
					min-width: 150px;
				}
			}
			div.submit-button {
				order: 1;
				button {
					color: $orange;
					background: white;
					&:hover {
						background: $orange;
						color: white;
					}
				}
			}
		}
	}
}

span.required {
	color: $primary-color;
}

div#rub_service {
	div#receipt-intro,
	div.section {
		padding: 0 100px;
		@media screen and ($max-mobile-viewport) {
			padding: 0;
		}
	}
}

div#evolution-log,
div#summary {
	h2 {
		font-size: 1.769rem;
		text-transform: uppercase;
		text-align: left;
		&::after {
			content: '';
			display: block;
			margin-top: 10px;
			height: 3px;
			width: 20px;
			background: $orange;
		}
	}
}

form + br,
div.back-home-button {
	display: none;
}

ul#evolutions {
	li {
		span.item {
			background: $orange !important;
			border: 1px solid transparent;
			box-shadow: none;
			&::before {
				content: none;
			}
		}
		&::after {
			content: none;
		}
	}
	&::after {
		width: 3px;
		background: $orange;
		left: 29px;
	}
}

@media screen and ($max-mobile-viewport) {
	div#columns-wrapper {
		padding: 0;
	}
}

.gru-content .cell.textcell.encart {
	float: right;
	z-index: 1000;
	position: relative;
	@media screen and ($max-mobile-viewport) {
		float: none;
	}
	> div {
		padding: 1rem;
		max-width: 20em;
		margin-right: 100px;
		position: relative;
		background: #6c5e5b;
		color: white;
		&::before {
			content: "";
			width: 85px;
			height: 79px;
			background: url(img/standard/picto--infos.png) center center no-repeat;
			display: block;
			position: absolute;
			top: -40px;
			left: -40px;
		}
		@media screen and ($max-mobile-viewport) {
			margin: 1ex 3ex;
			max-width: none;
		}
		box-shadow: 0 3px 5px 5px #ccc;
		h3 {
			text-transform: uppercase;
		}
	}
}

.gru-content .cell.textcell > div {
	margin: 3rem 100px 0 100px;
	@media screen and ($max-mobile-viewport) {
		margin: 3rem 1rem 0 1rem;
	}
	h2 {
		display: inline-block;
		padding: 0;
		font-size: 1.769rem;
		font-weight: 600;
		text-transform: uppercase;
		&::after {
			content: '';
			display: block;
			margin-top: 10px;
			height: 3px;
			width: 20px;
			background: $primary-color;
		}
	}
	h3, h4, h5, ul, p, table {
		margin: 1em 0;
		line-height: 1.8;
	}
	ul {
		padding-left: 2rem;
	}
}

.gru-content {
	div#title-section ~ div.profile,
	div#title-section ~ div.account-management,
	div#title-section ~ div.cell > div {
		margin: 3rem 100px 0 100px;
		@media screen and ($max-mobile-viewport) {
			margin: 3rem 1rem 0 1rem;
		}
		h2 {
			display: inline-block;
			padding: 0;
			font-size: 1.769rem;
			font-weight: 600;
			text-transform: uppercase;
			margin-bottom: 1rem;
			&::after {
				content: '';
				display: block;
				margin-top: 10px;
				height: 3px;
				width: 20px;
				background: $primary-color;
			}
		}
	}
	div#title-section ~ div.profile,
	div#title-section ~ div.account-management {
		margin: 3rem 0px 0 0px;
		padding: 0 100px;
		@media screen and ($max-mobile-viewport) {
			padding: 0 20px;
		}
	}
	div#title-section ~ div.cell.encart > div {
		margin: 3rem 100px 0 10px;
		@media screen and ($max-mobile-viewport) {
			margin: 3rem 1rem 0 1rem;
		}
	}
}

div#a2-profile {
	div#profile {
		padding-left: 0;
		font-size: 110%;
		line-height: 130%;
	}
}

div#account-management {
	margin-bottom: 2rem;
}

div.comment-field.note {
	box-shadow: 0 3px 5px 5px #ccc;
	border-radius: 10px;
	padding: 1rem;
	margin-right: 3rem;
	margin-bottom: 2rem;
	h4 {
		text-transform: uppercase;
	}
}

div#main-content-wrapper {
	overflow: hidden;
	position: relative;
}

div#actu {
	position: absolute;
	z-index: 100;
	right: -400px;
	@media screen and ($max-mobile-viewport) {
		right: calc(-100vw + 85px);
	}
	transition: right ease-out 0.5s;
	top: 62px;
	height: calc(100vh - 62px);
	background: url(img/header/icone-actu-home.png) top left no-repeat;
	img {
		transition: opacity ease-out 0.5s;
		opacity: 0;
		display: inline-block;
		cursor: pointer;
		vertical-align: top;
		position: relative;
		right: -1px;
	}
	div#actu-content {
		height: 100%;
		background: white;
		display: inline-block;
		width: 400px;
		@media screen and ($max-mobile-viewport) {
			width: calc(100vw - 85px);
		}
		padding: 20px 20px 20px 40px;
		@media screen and ($max-mobile-viewport) {
			box-shadow: none;
		}
		border-bottom-left-radius: 10px;
		h3 {
			font-size: 3.077rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 1.538rem;
			}
			margin-bottom: 2rem;
			a.rss {
				margin-left: 1rem;
				display: inline-block;
				background: url(img/home/home-actu-ouvert/flux-rss.png) center center no-repeat;
				width: 17px;
				height: 16px;
			}
		}
		div.feed-entries {
			height: calc(100vh - 300px);
			overflow-y: auto;
			div.feed-entry {
				border-top: 1px solid #d5d5d5;
				padding: 1rem 0;
				margin-right: 20px;
				span.date {
					background: url(img/home/home-actu-ouvert/picto-date.png) left center no-repeat;
					padding-left: 20px;
					font-style: italic;
				}
				a.read {
					text-transform: uppercase;
					display: block;
					color: $dark-link-color;
					text-align: right;
					padding-right: 30px;
					padding-top: 3px;
					background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
					@media screen and ($max-mobile-viewport) {
						display: none;
					}
				}
				h4 a {
					color: $font-color;
					@media screen and ($max-mobile-viewport) {
						display: block;
						padding-right: 30px;
						background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
					}
				}
			}
		}
		a.all {
			margin-top: 3rem;
			font-weight: bold;
			text-transform: uppercase;
			display: inline-block;
			padding-right: 30px;
			color: $dark-link-color;
			background: url(img/home/home-actu-ouvert/chevron-droite-rouge.png) center right no-repeat;
		}
	}
}

#content {
	transition: opacity linear 0.2s;
}

#main-content.news-open {
	div#actu {
		right: 0;
		div#actu-content {
			box-shadow: 0 0 5px black;
		}
		img {
			opacity: 1;
		}
	}
	#content {
		opacity: 0.5;
		pointer-events: none;
	}
}

#login-page div.block,
#content div.a2-block {
	width: 40rem;
	@media screen and ($max-mobile-viewport) {
		width: auto;
		padding-top: 1rem;
	}
	margin: 0 auto;
	h2 {
		font-size: 3.538rem;
		font-weight: bold;
		@media screen and ($max-mobile-viewport) {
			font-size: 2.462rem;
		}
	}
	p {
		line-height: 1.8;
	}

	form ul.errorlist.nonfield li {
		background: #eee;
		color: red;
	}
}

#columns > div.a2-block {
	padding-top: 160px;
}

#login-page button.cancel-button {
	display: none;
}

ul {
	list-style-image: url(img/puce.png);
}

#nav-tracking-code {
	@media screen and ($max-mobile-viewport) {
		display: none;
	}
	box-sizing: content-box;
	background: #554b49;
	border-top: 10px solid $violet;
	padding: 10px 1rem 0 1rem;
	text-align: center;
	height: 200px;
	input {
		background: #554b49;
		border: 0;
		border-bottom: 1px solid white;
		color: white;
	}
	input::placeholder {
		color: #eee;
	}
	button {
		border: 0;
		cursor: pointer;
		background: url(img/menu/menu-validation.png) center center no-repeat;
		text-indent: -1000px;
		height: 43px;
		width: 43px;
	}
}

#messages li {
	margin-top: 0;
	&:last-child {
		margin-bottom: 0;
	}
}

#steps-mobile {
	display: none;
}

@media screen and ($max-mobile-viewport) {
	#steps {
		display: none;
	}
	#steps-mobile {
		display: block;
		margin: 0 auto;
		text-align: center;
		div.position {
			margin: -35px auto 0 auto;
			width: 68px;
			height: 68px;
			background: $orange;
			border-radius: 100%;
			color: white;
			span {
				font-size: 1.385rem;
				line-height: 34px;
				font-weight: bold;
				display: block;
				text-align: center;
				margin: 0 auto;
				width: 2rem;
				&.current-page {
					border-bottom: 1px solid white;
				}
			}
		}
		.current-label {
			display: inline-block;
			font-weight: bold;
			font-size: 1rem;
			padding: 1ex;
		}
	}
}

.CheckboxWidget, .CheckboxesWidget, .RadiobuttonsWidget {
	> .title {
		padding-bottom: 2px;
	}
	.content {
		line-height: 150%;
	}
}

#content #registration-title {
	background: $violet url(img/header/img_ville_background_header_pageinter.jpg) top center no-repeat;
	background-size: cover;
	font-size: 1.231rem;
	text-align: center;
	width: auto;
	padding-top: 160px;
	padding-bottom: 30px;
	margin-bottom: 30px;
	max-width: none;
	color: white;
	h2 {
		background: transparent;
		color: white;
	}
	p {
		font-weight: 600;
	}
	@media screen and ($max-mobile-viewport) {
		padding-top: 70px;
	}
}

#login-blocks,
#registration-blocks {
	display: flex;
	justify-content: center;
	@media screen and ($max-mobile-viewport) {
		display: block;
	}
	div.a2-block {
		max-width: 35rem;
		margin: 0 3rem;
		@media screen and ($max-mobile-viewport) {
			max-width: none;
			margin: 0 1rem;
		}
		position: relative;
		h2 {
			font-size: 2.769rem;
			padding-left: 0;
			@media screen and ($max-mobile-viewport) {
				font-size: 2rem;
			}
		}
		&#frontend-login-password::after,
		&#frontend-registration-email::after {
			content: "";
			position: absolute;
			display: block;
			background: #666;
			width: 1px;
			top: 80px;
			bottom: 80px;
			right: -3rem;  // -margin
			@media screen and ($max-mobile-viewport) {
				height: 1px;
				width: auto;
				top: auto;
				bottom: -12px;
				left: 40px;
				right: 40px;
				content: "";
			}
		}
	}
}

#login-page.methods1 #login-blocks #frontend-login-password::after,
#registration-blocks div.a2-block.registration-frontend-0#frontend-registration-email::after {
		content: none;
}

#login-blocks {
	padding-bottom: 7rem;  // enough space for lost password/create account lines
}

#frontend-login-password {
	.login-actions {
		// get lost password/create account lines out of flow, so the
		// FranceConnect button can be aligned with the login button.
		position: absolute;
		@media screen and ($max-mobile-viewport) {
			position: static;
		}
	}
}

div#frontend-login-fc,
div#frontend-registration-fc {
	div#fc-button-wrapper, div#fc-explanation-text {
		text-align: left;
		padding-top: 0;
	}

	div#fc-button {
		box-shadow: none;
		width: auto;
		a div img {
			height: 60px;
		}
		position: absolute;
		bottom: 0;
		@media screen and ($max-mobile-viewport) {
			position: static;
		}
	}
}

div.list-of-forms span.form-number {
	opacity: 0.8;
}

#profile span.label {
	font-weight: bold;
}

form p label,
form.quixote div.title label {
	font-weight: bold;
}

form.quixote div.widget {
	margin-bottom: 4ex;
}

div#rub_service div#info {
	padding: 100px;
	h2 {
		font-weight: bold;
		text-align: left;
		font-size: 3.077rem;
		padding: 0;
	}
	@media screen and ($max-mobile-viewport) {
		padding: 60px 20px;
	}
}

#pwa-navigation {
	a {
		text-transform: uppercase;
		font-weight: bold;
		&:hover {
			text-decoration: none;
		}
		padding-top: 38px;
	}
}

div.communes-toulouse {
	line-height: 60px;
	select {
		text-transform: uppercase;
		font-weight: bold;
		width: auto;
		border-radius: 20px;
		border: 1px solid #6A5F5B;
		&:focus {
			border: 1px solid #6A5F5B;
		}
	}
	@media screen and ($max-mobile-viewport) {
		text-align: center;
	}
}

div#messages {
	margin: 0 0 0 4px;
	@media screen and ($max-mobile-viewport) {
		margin-left: 0;
	}
	li {
		margin-bottom: 0;
	}
}

div#main-content div#messages {
	// push main content down
	visibility: hidden;
}

$list-illus:
	dechets-fagots,
	dechets-sacs,
	encombrants-armoire-commode,
	encombrants-aspirateur,
	encombrants-autre-objet-volumineux,
	encombrants-canape,
	encombrants-chaise,
	encombrants-cuisiniere,
	encombrants-etagere-table,
	encombrants-lave-vaisselle-four,
	encombrants-machine-a-laver,
	encombrants-matelas-sommier,
	encombrants-ordinateur-tele,
	encombrants-palette,
	encombrants-petit-electromenager,
	encombrants-refrigerateur,
	encombrants-refrigerateur-americain;

@each $list-illu in $list-illus {
	div#rub_service form div.widget.#{$list-illu} div.title {
		background: url(/assets/picto:#{$list-illu}) 0px 20px no-repeat;
		height: 150px;
	}
}
