@import '../includes/fonts/montserrat';
@import 'encombrants';

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

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

a:hover {
	text-decoration: underline;
}

%toulouse-button {
	background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
	border-radius: 5px;
	font-size: 1.154rem;
	font-weight: bold;
	color: white;
	position: relative;
	padding: 1.5rem 3rem;
	box-shadow: 0px 0px 5px black;
	text-transform: uppercase;
	overflow: visible;

	&::after {
		content: '';
		position: absolute;
		display: block;
		background: url(img/formulaire/chevron-fond-blanc.png) top left no-repeat;
		width: 51px;
		height: 51px;
		right: -25px;
		top: calc(50% - 25px);
		transition: right ease 0.1s;
	}
	&:hover::after {
		right: -30px;
	}
	&::before {
		content: '';
		position: absolute;
		display: block;
		background: url(img/home/home-associations/encoche-blanche.png) top left no-repeat;
		width: 19px;
		height: 23px;
		left: -6px;
		top: calc(50% - 10px);
	}
}

%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);
		}
	}
}

.page-template-two-columns #columns {
	padding: 2rem;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-bottom: 1px solid #d2cccc;
	z-index: 999;
	#logo {
		background: url(img/logo.png) center center no-repeat;
		text-indent: -10000px;
		height: $header-height;
		width: 210px;
		margin: 0 auto;
		position: relative;
		left: $nav-width / 2;  // make it look centered like page content
		a {
			display: block;
			width: 207px;
			height: $header-height;
		}
		@media screen and ($max-mobile-viewport) {
			position: static;
			margin: 0 0 0 auto;
		}
	}
	#toplinks {
		margin-left: 3rem;
		text-align: left;
		text-transform: uppercase;
		font-weight: bold;
		padding-left: 60px;
		background: url(img/header/icone-connexion.png) center left no-repeat;
		top: 0;
		left: 0;
		height: $header-height;
		line-height: 52px;
		width: 40%;
		border: none;
		box-shadow: none;
		a {
			color: #322f38;
			font-size: 0.692rem;
		}
		@media screen and ($max-mobile-viewport) {
			cursor: pointer;
			margin-left: 1ex;
			width: calc(100% - 210px);
			overflow: hidden;
		}
	}
}

.site-nav {
	position: fixed;
	height: $intro-height;
	top: $header-height;
	left: 0;
	background: rgba(204,88,49,1);
	background: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
	@media screen and ($max-mobile-viewport) {
		background: linear-gradient(to left, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
		display: none;
	}
	color: white;
	font-size: 0.846rem;
	width: $nav-width;
	text-transform: uppercase;
	z-index: 150;
	> div {
		position: relative;
		z-index: 10;
		height: 100%;
	}
	&::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-width: #{$mobile-limit - 1px}) {
					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);
			}
			&.menu-famille a,
			&.menu-famille.selected a,
			&.menu-famille a:hover {
				background-image: url(img/menu/menu-famille.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%;
	}
}

@media screen and (max-width: $nav-mobile-limit) {
	.site-nav,
	.pwa-navigation {
		display: none;
	}
	footer {
		margin: 0 !important;
	}
}

footer {
	z-index: 0;
	margin-left: $nav-width;
	@media screen and ($max-mobile-viewport) {
		margin-left: 0;
	}
	#footer-wrapper {
		padding-bottom: 0;
	}
	div.trackingcodeinputcell,
	div.feedcell {
		display: none;
	}
	@media screen and ($max-mobile-viewport) {
		div.trackingcodeinputcell {
			display: block;
			text-align: center;
			h2 {
				text-transform: uppercase;
				margin-bottom: 0;
			}
			form {
				margin-top: 0;
			}
			p {
				display: none;
			}
			input {
				background: transparent;
				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;
	padding-top: $header-height;
	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,
.page-template-homepage_family .gru-content {
	display: block;
}

section {
	padding: 2rem;
}

section#intro {
	min-height: $intro-height;
	background: url(img/home/bg-portable-home.jpg) top right no-repeat;
	@media screen and ($max-mobile-viewport) {
		min-height: auto;
		background: url(img/mobile-laptop.png) bottom center no-repeat;;
		background-size: contain;
	}
}

section#section-particuliers,
section#section-associations,
section#section-professionnels {
	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: 60px;
			height: 60px;
			border-radius: 100%;
			box-shadow: 0 0 5px 5px #ccc;
			position: relative;
			top: 20px;
			margin-right: 20px;
		}
		+ a {
			position: absolute;
			top: -4rem;
			@media screen and ($max-mobile-viewport) {
				top: -2rem;
			}
		}
	}
}

section#section-particuliers {
	background: #322f38 url(img/home/home-particuliers/bg-home-particuliers-bg.png) bottom left no-repeat;
	color: white;
	min-height: 400px;
	h1:first-child {
		&::before {
			background-image: url(img/home/home-particuliers/picto-particuliers.png);
			box-shadow: 0 0 5px 5px #222;
		}
		position: absolute;
		@media screen and ($max-mobile-viewport) {
			position: static;
		}
	}
	&.icone-famille {
		min-height: 500px;
		h1:first-child::before {
			background-image: url(img/home/home-particuliers/picto-famille.png);
		}
	}
	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: #4f4c56;
			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;
			> 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: block;
				background: url(img/home/home-associations/fleche-fond-rouge.png) center center no-repeat;
				width: 45px;
				height: 45px;
				position: absolute;
				right: -22px;
				top: 10px;
			}
			&::before {
				content: '';
				background-image: url(img/home/home-professionnels/encoche-noire.png);
				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 {
			box-sizing: content-box;
			padding: 20px 30px;
			position: absolute;
			background: white;
			left: 350px;
			top: -30px;
			width: 300px;
			z-index: 1000;
			border-radius: 10px;
			box-shadow: 0 0 5px black;
			li {
				a {
					border: none;
					color: $dark-link-color;
					background: url(img/home/home-particuliers/fleche-rouge.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;
				background: url(img/home/home-particuliers/encoche-rouge.png) center center no-repeat;
				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: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
					border-radius: 5px 5px 0 0;
				}
				ul {
					display: block;
				}
			}
		}
		@media screen and ($min-desktop-viewport) {
			&:hover {
				h2 {
					background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
				}
				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: transparent;
				color: white;
				&::placeholder,
				&:-ms-input-placeholder,
				&::-ms-input-placeholder {
					color: #acacae;
				}
			}
			button {
				height: 43px;
				width: 43px;
				margin-right: 0;
				box-shadow: none;
				background: url(img/menu/menu-validation.png);
			}
		}
	}
	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: white url(img/home/home-associations/bg-home-associations.png) bottom right no-repeat;
	h1:first-child {
		&::before {
			background-image: url(img/home/home-associations/picto-associations.png);
		}
	}
}

section#section-professionnels {
	background: #322f38 url(img/home/home-professionnels/bg-home-professionnels.png) top left no-repeat;
	color: white;
	h1:first-child {
		&::before {
			background-image: url(img/home/home-professionnels/picto-professionnels.png);
			box-shadow: 0 0 5px 5px #222;
		}
	}
}

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

section#section-professionnels {
	div.wcsformcell {
		a {
			background: #4f4c57;
			color: white;
			&::before {
				background-image: url(img/home/home-professionnels/encoche-noire.png);
			}
		}
	}
}

#vos-services-en-ligne {
	margin: 120px 0 0 40px;
	> div {
		margin: 0;
	}
	border: none;
	width: calc(100vw - 700px);
	background: rgba(255, 255, 255, 0.4);
	max-width: 50rem;
	font-size: 1.077rem;
	h1 {
		color: #2e2d35;
		font-size: 4.538rem;
		margin: 0;
	}
	h2 {
		text-transform: uppercase;
		font-weight: normal;
		color: $primary-color;
		margin: 0;
		margin-bottom: 2rem;
		font-size: 1.769rem;
		letter-spacing: 3px;
		&::after {
			content: none;
		}
	}
	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;
			margin: 0 50px;  // space for "actus" button
		}
		h2 {
			font-size: 1.538rem;
		}
	}
}

#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: #322f38 url(img/formulaire/bg-titre-formulaire.png) bottom right no-repeat;
	padding: 100px 50px 100px 100px;
	color: white;
	p.category-name {
		background: url(img/formulaire/picto-formulaire.png) center left no-repeat;
		height: 35px;
		line-height: 35px;
		padding-left: 45px;
		font-size: 1.154rem;
		font-weight: bold;
	}
	h1 {
		margin-top: 0;
		font-size: 3.077rem;
		margin-right: 160px;
		@media screen and ($max-mobile-viewport) {
			margin-right: 0;
		}
	}
	div#temps-de-reponse {
		box-sizing: content-box;
		position: absolute;
		right: 80px;
		top: 110px;
		width: 50px;
		text-align: center;
		background: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
		border-radius: 5px;
		padding: 10px 0;
		span {
			display: block;
			color: #fff;
			font-size: 1rem;
			padding-top: 45px;
			background: url(img/formulaire/picto-reveil.png) top center no-repeat;
		}
	}
	& > div {
		margin: 0;
	}
	@media screen and ($max-mobile-viewport) {
		padding: 30px 1rem 1rem 1rem;
		p.category-name,
		div#temps-de-reponse {
			display: none;
		}
	}
}

div#buttons-section {
	background: #322f38 url(img/formulaire/bg-bandeau-suivant.png) 0px -63px no-repeat;
	padding: 2rem 1rem;
	overflow: hidden;
}

div#title-section,
div#buttons-section {
	a.pk-button {
		color: white;
		position: relative;
		text-transform: uppercase;
		font-weight: bold;
		display: inline-block;
		padding: 2rem;
		text-align: center;
		background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
		border-radius: 5px;
		box-shadow: 0 0 4px #45434c;
		font-size: 1rem;
		&::before {
			content: '';
			position: absolute;
			display: block;
			background: url(img/home/home-professionnels/encoche-noire.png) top left no-repeat;
			width: 19px;
			height: 23px;
			left: -8px;
			top: calc(50% - 10px);
		}
		&::after {
			content: '';
			position: absolute;
			display: block;
			background: url(img/home/home-associations/chevron-fond-blanc.png) top right no-repeat;
			width: 47px;
			height: 48px;
			right: -22px;
			top: calc(50% - 24px);
		}
		&:hover {
			color: $dark-link-color;
			background: white;
			text-decoration: none;
			&::after {
				background-image: url(img/home/home-associations/chevron-fond-rouge.png);
			}
		}
	}
}

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

section#section-professionnels {
	div.wcsformcell {
		a {
			&::before {
				background-image: url(img/home/home-professionnels/encoche-noire.png);
			}
		}
	}
}

div#gauche {
	position: relative;
	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: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
		border-radius: 5px;
		h3, a {
			background: transparent;
			color: white;
		}
	}
}

#steps {
	h2 {
		display: none;
	}
	margin-top: -55px;
	ol {
		position: relative;
		text-align: left;
		display: flex;
		list-style-type: none;
		margin: 0;
		padding: 0;
		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: 70px;
				height: 70px;
				line-height: 70px;
				border-radius: 100%;
				color: #333;
				border: 1px solid $primary-color;
				background: white;
				z-index: 100;
				position: relative;
				font-weight: bold;
				font-size: 2.538rem;
			}
			&.step-before,
			&.current {
				background: transparent;
				.marker {
					background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
					border-radius: 100%;
					color: white;
				}
			}
			.label {
				padding-top: 10px;
				display: block;
				font-weight: bold;
			}
			&::before {
				display: block;
				position: absolute;
				top: 38px;
				left: 0;
				width: 100%;
				height: 3px;
				background: $primary-color;
				z-index: 50;
			}
			&.current::before {
				content: '';
				width: 50%;
			}
			&.step-before::before {
				content: '';
			}
			&.step-before span.marker span.mark {
				display: block;
				height: 100%;
				background: url(img/step-mark.png) center center no-repeat;
			}
		}
		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 38px;
			width: 100%;
			height: 3px;
			background: #4d4d55;
		}
	}
	&.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 {
		ol {
			li {
				&.step-before, &.step-after {
					display: none;
				}
			}
		}
	}
	@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 {
	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 {
			&[class*=grid-] {
				box-sizing: content-box;
			}
			@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: $primary-color;
			}
		}
		div.page h3 {
			border: none;
		}
		div.widget div.title {
			font-size: 1.231rem;
		}
		> div.buttons {
			margin: 0 -100px;
			background: #322f38 url(img/formulaire/bg-bandeau-suivant.png) 0px -63px no-repeat;
			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 {
				@extend %toulouse-button;
				margin-bottom: 1rem;
				&::before {
					background-image: url(img/formulaire/encoche-noire.png);
				}
			}
			div.cancel-button {
				visibility: hidden;
			}
			div.previous-button + div.cancel-button {
				display: none;
			}
			div.previous-button {
				button::after {
					background: url(img/formulaire/chevron-gauche-fond-blanc.png) top left no-repeat;
					width: 51px;
					height: 51px;
					right: auto;
					left: -25px;
					top: calc(50% - 25px);
				}
				button::before {
					background: url(img/formulaire/encoche-gauche-noire.png) top left no-repeat;
					width: 19px;
					height: 23px;
					left: auto;
					right: -6px;
					top: calc(50% - 10px);
				}
			}
			div.submit-button {
				order: 1;
			}
		}
	}
}

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: $primary-color;
		}
	}
}

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

ul#evolutions {
	li {
		span.item {
			background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%) !important;
			border: 1px solid transparent;
			box-shadow: none;
		}
		&::after {
			content: none;
		}
	}
	&::after {
		width: 3px;
		background: $primary-color;
		left: 29px;
	}
}

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

.gru-content .cell.textcell.encart {
	float: right;
	@media screen and ($max-mobile-viewport) {
		float: none;
	}
	> div {
		padding: 2rem;
		max-width: 20em;
		margin-right: 100px;
		position: relative;
		&::before {
			content: "";
			width: 85px;
			height: 79px;
			background: url(img/pointInterrogation.png) center center no-repeat;
			display: block;
			position: absolute;
			top: -40px;
			left: calc(50% - 43px);
		}
		@media screen and ($max-mobile-viewport) {
			margin: 1ex 3ex;
			max-width: none;
		}
		box-shadow: 0 3px 5px 5px #ccc;
		border-radius: 10px;
		h3 {
			text-transform: uppercase;
		}
	}
}

.gru-content .cell.items-history > div,
.gru-content .cell.active-items > div,
.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#a2-profile {
	div#profile {
		padding-left: 0;
		font-size: 110%;
		line-height: 130%;
	}
}

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

#portal-back-links {
	position: absolute;
	top: 1rem;
	left: 8rem;
	@media screen and ($max-mobile-viewport) {
		position: static;
		padding-bottom: 1ex;
		text-align: center;
	}
}

#title-section #logout-button {
	&::before, &::after { content: none; }
	margin-top: -1em;
	padding: 1em;
	background: $primary-color;
	font-weight: bold;
	&:hover {
		color: white;
	}
}


div#account-management-fc {
	div#fc-registration-user-info, div#fc-button-wrapper, div#fc-explanation-text {
		text-align: left;
	}
}

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

body:not(.authentic-page) 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;
		}
	}
}

body[class*="formdef"] {
	div#actu {
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
	}
}

#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 {
	padding-top: 4rem;
	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 > button {
		@extend %toulouse-button;
	}

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

#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;
	}
	margin-top: -45px;
	background: url(img/menu/menu-code-barre.png) top center no-repeat;
	padding: 55px 1rem 0 1rem;
	text-align: center;
	input {
		background: transparent;
		border: 0;
		border-bottom: 1px solid #66606b;
		color: white;
	}
	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;
}

#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: -55px auto 0 auto;
			width: 68px;
			height: 68px;
			background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
			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;
		}
	}
	.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 {
		+ #steps-mobile {
			span.total-pages {
				display: none;
			}
			div.position span.current-page {
				border-bottom: none;
				line-height: 70px;
				font-size: 2.538rem;
			}
		}
	}
}

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

#content #registration-title {
	text-align: center;
	width: auto;
	max-width: 80rem;
	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, div#fc-registration-user-info {
		text-align: left;
		padding-top: 0;
		p {
			margin-left: 0;
		}
	}

	div#fc-registration-user-info {
		p.certified {
			margin-left: 2rem;
		}
	}

	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#fc-registration-user-info + div#fc-button-wrapper {
		div#fc-button {
			position: static;
		}
	}
}

.field-live-hint .close {
	font-size: 2em;
	font-weight: bold;
}

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;
	}
}

.authentic-page {
	.site-header, .site-nav, div#actu {
		display: none;
	}
	div#page {
		background: white;
	}
	div#main-content-wrapper {
		padding-left: 0;
	}
	footer {
		margin-left: 0;
	}
	@media screen and ($max-mobile-viewport) {
		div#main-content-wrapper,
		#content #registration-title {
			padding-top: 1rem;
		}
	}
}
