@import '../includes/fonts/roboto';

@mixin trapesoid($border-color: $secondary-color, $width: 1em, $background-color: #fff) {
	box-sizing: content-box;
	position: relative;
	padding: 0.25em 0.25em 0.25em 1.75em;
	border-left: 1.25em solid $background-color;
	border-right: 0;
	border-top: 0;
	border-bottom: 0;
	@media screen and ($max-mobile-viewport) {
		padding-left: 15px;
		border-left: 0;
	}
	&::before {
		content: '';
		display: block;
		width: 15px;
		background: $background-color;
		position: absolute;
		top: 0;
		left: -0.75em;
		bottom: 0;
		transform: skew(-25deg);
		border-left: $width solid $border-color;
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
	}
}

@mixin button($background-color: $primary-color) {
	padding: 1ex 1em;
	margin: 1ex 0;
	background: $background-color;
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
}

// Utils
.text-center-mobile {
	@media ($max-mobile-viewport) {
		text-align: center;
	}
}

//
//	Header
//
div#header-wrapper {
	background: #fff;
}
// toplinks
.toplinks--wrapper {
	background-color: $gray-dark;
}
#toplinks {
	// reset
	position: static;
	border: 0;
	box-shadow: none;
	background-color: transparent;

	max-width: $width;
	margin: 0 auto;
	font-size: 0.9em;
	line-height: 40px;
	padding: 0;
	padding-right: 0.7rem;
	text-align: right;
	color: white;

	@media ($min-desktop-viewport) {
		padding-right: 100px;
	}

	span {
		a {
			color: inherit;
			&:first-child {
				&::before {
					content: url('img/icone-connexion.svg');
					display: inline-block;
					width: 1em;
					height: 1em;
					margin-right: 0.3em;
					vertical-align: sub;
				}
			}
		}
	}
}

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

#logo.has-logo {
	padding: 20px 0;
	@media ($min-desktop-viewport) {
		align-self: center;
	}
	& a {
		display: block;
		height: 50px;
		@media ($max-mobile-viewport) {
			background-position: center;
		}
		@media ($min-desktop-viewport) {
			height: 60px;
			width: 360px;
		}
	}
}
.header--logos-partners {
	display: flex;
	align-items: flex-end;

	@media ($max-mobile-viewport) {
		display: none;
	}
}
.header--feder-link {
	margin-right: 100px;
	img {
		width: 190px;
		height: auto;
	}
}
.header--cd06-link {
	margin-bottom: #{ -1 * $nav-height };
	img {
		height: 190px;
		width: auto;
	}
}



//
//	Nav
//

div#nav-wrapper {
	background: #fff;
	ul {
		margin-top: 0;
	}
	@media screen and ($max-mobile-viewport) {
		text-align: left;
	}
}

div.gru-nav {
	> ul > li {
		@media screen and ($min-desktop-viewport) {
			&:not(:last-child)::after {
				content: '/';
			}
		}
		&.selected a {
			font-weight: bold;
		}
		a {
			font-weight: normal;
		}
	}
	.gru-nav-button {
		top: 0;
		left: 0;
		border: 6px solid transparent;
		+ ul {
			border: 0;
		}
	}
}


//
//	Main
//

div#main-content-wrapper {
	margin-top: 2ex;
}


div.gru-content div, div.gru-content div.cell {
	h2 {
		margin: 0 auto;
		&:first-child {
			@include trapesoid;
		}
	}
}

div.homepage-container {
	width: 100%;
	h2 {
		display: block;
		width: 50%;
		margin: 0 auto;
		@media screen and ($max-mobile-viewport) {
			width: auto;
		}
	}
	div.cell {
		background: transparent;
	}
	div.homepage-intro, div.homepage-suggestions {
		margin: 3ex 0;
	}
	div.homepage-search {
		background: $primary-color;
		color: #fff;
	}
	div.homepage-header {
		width: 55%;
		margin: 0 auto;
		@media screen and ($max-mobile-viewport) {
			width: 100%;
		}
	}
	div.homepage-intro {
		background: url('img/fond-intro.png') transparent no-repeat;
		background-position: center center;
		color: $primary-color;
	}
	div.homepage-suggestions, div.events, div.homepage-prefooter-body, div.homepage-quote, div.homepage-search {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	div.homepage-search {
		align-items: flex-start;
		div.searchcell {
			padding: 0;
		}
		div.combo-search-results a {
			background: $secondary-color;
			color: #fff;
		}
	}
	div.homepage-faq {
		background: $primary-color;
		padding: 1ex 1em 2ex 1em;
		h3 {
			background: #fff;
			padding-top: 0.5ex;
			padding-bottom: 0.5ex;
			display: inline;
			margin: 1ex 1em;
			@include trapesoid($border-color: $ternary-color, $background-color: $primary-color);
			@media screen and ($max-mobile-viewport) {
				display: inline-block;
			}
		}
		div.cell {
			text-align: center;
			color: #fff;
		}
	}
	div.homepage-quote {
		background-image: url('img/fond-quote.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-color: #fff;
		color: $primary-color;
		a {
			color: $secondary-color;
		}
		div.quote {
			position: relative;
			&::before, &::after {
				position: absolute;
				content: '';
				display: block;
				width: 20px;
				height: 20px;
			}
			&::before {
				top: -20px;
				left: -20px;
				background: url('img/quote-begin.png') no-repeat;
				background-size: contain;
			}
			&::after {
				content: '';
				bottom: -20px;
				right: -20px;
				background: url('img/quote-end.png') no-repeat;
				background-size: contain;
			}
		}
	}
	div.homepage-suggestions {
		background: url('img/fond-suggestions.png') transparent no-repeat;
		background-position: center center;
		text-align: center;
		.cell {
			border: 3px solid $secondary-color;
			height: 200px;
			width: 200px;
			border-radius: 50%;
			background: #fff;
			a {
				font-size: 75%;
			}
			&.nouvelle-demande {
				background: $primary-color;
				a {
					color: #fff;
				}
			}
		}
	}
	div.homepage-events {
		background: url('img/fond-evenements.png') center right no-repeat, url('img/fond-rose-evenements.png') center center no-repeat;
		background-color: #fff;
		padding-top: 3ex;
		div.cell {
			background: transparent;
			h2 {
				width: 50%;
				margin: 0 auto;
				@include trapesoid($ternary-color);
				@media screen and ($max-mobile-viewport) {
					width: auto;
				}
			}
		}
		div.events {
			div.cell {
				margin: 2ex 2em;
				text-align: center;
				background: $primary-color;
				color: #fff;
				a {
					color: #fff;
				}
			}
		}
	}
	div.homepage-prefooter {
		background: $primary-color;
		padding: 3ex;
		div.cell:first-child {
			width: 50%;
			margin: 0 auto;
			@media screen and ($max-mobile-viewport) {
				width: auto;
			}
		}
		h2:first-child {
			color: $secondary-color;
			background: #fff;
			@include trapesoid($background-color: $primary-color, $border-color: $ternary-color);
		};
		div.homepage-prefooter-body {
			color: #fff;
			padding: 3ex 3em;
			div.cell {
				width: 40%;
				@media screen and ($max-mobile-viewport) {
					width: auto;
				}
			}
		}
	}
}

div.gru-content div#rub_service, div#rub_service {
	h2 {
		text-transform: uppercase;
		text-align: left;
		border-bottom: 0;
		color: #fff;
		@include trapesoid;
	}
	h3, div#summary h2, div#evolution-log h2 {
		text-transform: uppercase;
		text-align: left;
		border-bottom: 0;
		color: $primary-color;
		background: #fff;
		font-size: 125%;
		font-weight: normal;
		margin: 1ex 0;
		@include trapesoid;
	}
	div.widget {
		margin-bottom: 3ex;
		&.FileWidget {
			margin-bottom: 0;
		}
		div.title {
			font-weight: bold;
			margin-bottom: 1ex;
		}
	}
	div.form-validation h3 {
		margin-top: 0;
	}
	div.form-validation, div.dataview {
		h3 {
			background: $primary-color;
			color: #fff;
			padding-bottom: 1ex;
			padding-left: 15px;
			border-left: 0;
			&::before {
				display: none;
			}
		}
		input, textarea {
			border: 0;
			width: 100%;
			display: block;
		}
		div.widget div.title, div.field span.label {
			font-weight: bold;
			&::after {
				content: ':';
				margin-left: 0.3em;
			}
		}
		div.field {
			margin: 0;
		}
		div.title, div.content, div.value {
			display: inline;
		}
		div.page {
			margin: 2em 0;
			padding: 0;
			background: #fff;
			border: 3px solid $primary-color;
			> div {
				padding: 0 1em;
				h3 {
					color: #000;
					background: transparent;
					padding: 0;
				}
			}
		}
		span.value {
			display: inline;
		}
	}
	div.dataview {
		padding: 1rem;
		border: 3px solid $primary-color;
		h3 {
			background: transparent;
			color: #000;
			padding: 0;
			text-transform: none;
			font-weight: bold;
		}
		div.page {
			div.title h3 {
				font-weight: normal;
			}
			border: 0;
			> div {
				padding: 0;
			}
		}
	}
}

div.SubmitWidget {
	margin-left: 1em;
}

div.back-home-button {
	text-align: center;
}
div.back-home-button a, a.custom-button {
	@include button;
	@include trapesoid;
}

a.turquoise-button {
	@include button($ternary-color);
}

form.quixote {
	div.widget div.content {
		margin-left: 20px;
	}
	button, input[type=submit] {
		border-radius: 15px;
	}
	div.buttons {
		button {
			text-transform: uppercase;
			box-shadow: none;
			position: relative;
			border-radius: 0;
		}
		.button_commentable-button button {
			border-radius: 15px;
		}
		div.cancel-button button {
			color: #000;
			background: transparent;
		}
		div.previous-button button {
			background: $ternary-color;
			@include trapesoid($secondary-color);
			padding-right: 0.75em;
		}
		div.submit-button {
			button {
				background: $primary-color;
				@include trapesoid($secondary-color);
				padding-right: 0.75em;
				font-size: 1.2em;
				font-weight: bold;
			}
		}
	}
}
// wcs form vertical buttons alignement
.quixote:not(#wf-actions) div.buttons {
	align-items: center;
	@media ($max-mobile-viewport) {
		.SubmitWidget {
			margin-left: 0;
		}
		.cancel-button {
			flex-basis: 100%;
			order: 4;
		}
	}
}

ul#evolutions li span.item {
	border: 1px solid $ternary-color;
	&::before {
		background: $ternary-color;
		height: 21px;
		width: 21px;
		top: 4px;
		left: 4px;
		border-radius: 10px;
	}
}

/* Steps */

.wcs-step--marker {
	font-weight: bold;
	border: 2px solid $primary-color;
}

.wcs-step.current {
	.wcs-step--label {
		font-weight: bold;
	}
}

@media ($min-desktop-viewport) {
	@if ($form-sidebar-position == left or $form-sidebar-position == right) {
			.wcs-step {
				font-size: 1.25em;
				&--label {
					margin-left: $wcs-steps-spacing / 2;
				}
		}
	}
}

/*  Social steps */

div#social-steps ol {
	background: #fff;
	position: relative;
	li {
		background: #fff;
		border-bottom: 0;
		position: relative;
		span {
			color: $primary-color;
			&.marker {
				border: 2px solid $primary-color;
				border-radius: 50%;
				font-size: 125%;
				font-weight: bold;
				width: 2em;
				height: 2em;
			}
			&.label {
				margin-top: 1ex;
				display: block;
				width: 100%;
			}
		}
		&.current {
			background: #fff;
			span.marker {
				background: $primary-color;
				color: #fff;
				@media screen and ($max-mobile-viewport) {
					border-radius: 50%;
				}
			}
		}
	}
}

div#social-steps ol {
	display: flex;
	padding: 0 1em;
	justify-content: center;
	li {
		min-width: 15%;
		list-style-type: none;
		margin: 0 1.5em;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		span {
			&.marker {
				display: flex;
				justify-content: center;
				align-items: center;
				@media screen and ($max-mobile-viewport) {
					font-size: 100%;
					background: #fff;
					color: $primary-color;
				}
			}
			&.label {
				text-align: center;
				font-size: 90%;
				@media screen and ($max-mobile-viewport) {
					display: none;
				}
			}
		}
		&:not(:last-child) {
			&::after {
				content: '';
				border: 1px solid $secondary-color;
				width: 2em;
				position: absolute;
				top: 1.2em;
				right: -3em;
				display: block;
			}
		}
		&.current {
			background: #fff;
			span.label {
				font-weight: bold;
			}
		}
	}
}

/* tracking code */
div#gauche {
	text-align: left;
	div#tracking-code {
		display: block;
		h3 {
			font-size: 150%;
			background: #fff;
			color: #000;
			border: 0;
			display: inline-block;
			padding-left: 0.5ex;
			&::after {
				content: ':';
				margin: 0 0.3em;
			}
			&::before {
				display: none;
			}
		}
	}
}


.column {
	width: 48%;
	@media screen and ($max-mobile-viewport) {
		width: auto;
	}
}
.column:last-child {
	float: right;
}

div.gru-content div.cell {
	padding-top: 2ex;
	&.header {
		h2:first-child {
			margin: 1em 0;
			display: inline-block;
		}

	}
	h2 {
		@extend %title;
	}
}

h2 + h2 {
	margin-top: 0.1ex !important;
	text-align: right;
}

.section-demarches div#page {
	background: url('img/page-header.png') no-repeat;
	background-position: center 170px;
	@media screen and ($max-mobile-viewport) {
		background-position: center 110px;
	}
	div.cell.textcell:first-child {
		background: transparent;
		display: inline-block;
		h2:first-child {
			@include trapesoid($border-color: $ternary-color);
		}
	}
}

.page-connexion {
	// prevent x scroll because #content::before element
	main {
		overflow-x: hidden;
	}
	div#content {
		@media ($min-desktop-viewport) {
			background-color: transparent;
			position: relative;
			&::before {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				background-color: #fff;
				background-image: linear-gradient(to right, $ternary-color 50%, #fff 50.1%);
				z-index: -1;
				transform: skew(-24deg) scale(1.4, 1) translateX(-25px);
			}
		}
	}
	div.cell, div.block {
		background: transparent;
	}
	div.cell {
		@each $class in (doc, eco, computer) {
			&.#{$class} {
				background: #fff;
			}
		}
	}
	.column {
		width: 40%;
		margin-left: 4em;
		@media screen and ($max-mobile-viewport) {
			width: 100%;
			margin: 0;
		}
	}
	div.column:first-child h2:first-child {
		@include trapesoid($border-color: $secondary-color, $background-color: $ternary-color);
	}
	div.block, div.a2-block {
		button, input[type="submit"] {
			background: #fff;
			color: $primary-color;
		}
		&:first-child {
			color: #fff;
			background: $primary-color;
		}
		button.cd06-adfs {
			width: 310px;
			height: 92px;
			border: 0;
			background: url('img/btn-connexion-agent-cd06.png') center no-repeat;
			box-shadow: none;
		}
		a {
			font-style: italic;
		}
	}
	.block-saml_cd06-adfs {
		display: flex;
		justif-content: center;
	}
}

div#fc-button-wrapper div#fc-button {
	box-shadow: none;
}

div.block, div.a2-block {
	input[type="text"], input[type="password"] {
		width: 100%;
	}
	h2 {
		margin-bottom: 1ex;
	}
}

div#frontend-registration-email form {
	padding: 1rem;
}

div#login-page {
	.forgot-password {
		float: right;
	}
	&.methods2 {
		div.block {
			float: none;
			width: 80%;
			color: #fff;
			@media screen and ($max-mobile-viewport) {
				width: 100%;
				margin: 0;
			}
			a {
				color: #fff;
			}
		}
	}
}

a.tip-button {
	background: $ternary-color;
	color: #fff;
	padding: 1ex 1em;
	position: relative;
	&::before, &::after {
		content: '';
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		background-size: contain;
	}
	&::before {
		background: url('img/left-tip-arrow.png') no-repeat;
		background-size: contain;
		top: -20px;
		left: -40px;
	}
	&::after {
		background: url('img/wow.png') no-repeat;
		background-size: contain;
		top: -30px;
		right: -30px;
	}
}

div.cell {
	@each $class in (doc, eco, computer) {
		&.#{$class} {
			margin: 3ex 0 3ex 150px;
			position: relative;
			h3 {
				color: $primary-color;
			}
			&::before {
				content: '';
				width: 90px;
				height: 90px;
				background: url('img/#{$class}-icon.png') no-repeat;
				background-size: contain;
				display: block;
				position: absolute;
				left: -130px;
			}
		}
		&.categories {
			&.pink-items {
				a:last-child::after {
					background: $secondary-color;
				}
			}
			&.turquoise-items {
				a:last-child::after {
					background: $ternary-color;
				}
			}
			p {
				display: inline-block;
				width: 25%;
				margin: 3ex 1em;
				vertical-align: middle;
				@media screen and ($max-mobile-viewport) {
					padding: 0 1em;
					margin: 3ex 0;
					width: 100%;
				}
				a {
					float: left;
					display: block;
					position: relative;
					margin-right: 10px;
					&:last-child {
						width: 70%;
						margin-right: 0;
						padding-top: 10px;
						&::after {
							content: '';
							display: block;
							height: 5px;
							width: 4em;
							position: absolute;
							top: 0;
						}
					}
				}
			}
		}
	}
	&.turquoise-header, &.pink-header {
		h3 {
			font-size: 125%;
			color: $primary-color;
		}
	}
	&.turquoise-header h3 {
		@include trapesoid($border-color: $ternary-color);
	}
	&.pink-header h3 {
		@include trapesoid($border-color: $secondary-color);
	}
	&.dossiers-social {
		div.dossiers, div.mes-dossiers {
			padding: 2ex 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
		}
		div.mes-dossiers {
			a.dossier-autonomie, a.dossier-handicap {
				color: #fff;
				background-size: cover;
				background-repeat: no-repeat;
				padding: 10ex 3em 1ex 3em;
				margin: 2ex 0;
				position: relative;
				z-index: 1;
				&::after {
					content: '';
					display: block;
					background: #000;
					width: 100%;
					height: 2.5em;
					position: absolute;
					bottom: 0;
					left: 0;
					opacity: 0.4;
					transform: translateZ(10);
					z-index: -1;
				}
			}
		}
		div.dossiers {
			width: $width;
			max-width: 100%;
			p {
				margin: 3ex 1em;
			}
			a {
				box-sizing: content-box;
				background: #dbebf1;
				color: $primary-color;
				padding: 2ex 2em;
				font-weight: bold;
				width: 380px;
				display: inline-block;
				text-align: center;
				@media screen and ($max-mobile-viewport) {
					width: auto;
				}
			}
		}
	}
	div.ph {
		table {
			border: 3px solid $primary-color;
			padding: 1em;
			width: 100%;
			min-width: 600px;
			caption {
				background: $primary-color;
				color: #fff;
				padding: 1ex 1em;
				text-align: left;
				font-weight: bold;
			}
			td {
				color: $secondary-color;
				padding: 1ex 0.25em;
			}
		}
		h4 {
			color: #fff;
			background: $primary-color;
			margin: 0;
			padding: 1em;
		}
		a.see-more {
			color: #000;
			white-space: nowrap;
			box-sizing: content-box;
			&::before {
				content: '+';
				border: 1px solid $secondary-color;
				margin-right: 0.5em;
				display: inline-block;
				width: 21px;
				height: 21px;
				border-radius: 50%;
				padding: 0 5px;
			}
		}
	}
}

span.form-status {
	color: $ternary-color;
}

div.tracking-code-input-cell.homepage {
	form {
		padding: 0 1em 1em 1em;
	}
	input#tracking-code {
		margin-right: 1rem;
	}
}


//
// Footer
//

footer {
	position: relative;
	margin-top: 1.5rem;
}

.footer--logos-partners {
	background-color: #fff;
	text-align: center;
	.footer--feder-link {
		display: inline-block;
		background-color: #fff;
		padding: 0.7rem;
		img {
			height: 70px;
			width: auto;
		}
	}

	@media ($min-desktop-viewport) {
		position: absolute;
		z-index: 1;
		bottom: 3rem;
		right: 1rem;

		.footer--feder-link {
			padding: 4px;
			img {
				height: 80px;
			}
		}
	}

	@media (min-width: $width + 1) {
		right: calc((100vw - #{$width}) / 2);
	}
}

div#footer-wrapper {
	background: $footer-background url('img/footer.png') 68% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	padding-bottom: 3rem;
	margin-top: 0;
	@media screen and ($max-mobile-viewport) {
		background: $footer-background url('img/footer-mobile.png') right bottom;
		background-repeat: no-repeat;
	}
	@media ($min-desktop-viewport) {
		min-height: 200px;
	}
	a {
		color: #fff;
	}
	li {
		list-style-type: none;
		padding: 3px 0;
		font-size: 90%;
		&::before {
			content: '\f054';
			font-family: FontAwesome;
			margin-right: 0.5em;
			font-size: 0.438rem;
			display: inline-block;
			vertical-align: middle;
		}
	}
}
div#footer {
	position: relative;
	div.social-media {
		position: absolute;
		top: -0.7rem;
		right: 0;
		margin: 0 0 45px 0;
		ul {
			padding: 0;
			margin: 0;
		}
		li {
			display: inline-block;
			font-size: 1em;
			width: 70px;
			height: 45px;
			padding: 0;
			@each $media in (rss, facebook, twitter, instagram) {
				&.#{$media} {
					background: url('img/footer-#{$media}-bg.png') no-repeat 0 0;
					margin-left: -13px;
				}
			}
			a {
				margin: 0 0 0 16px;
				display: block;
				width: 36px;
				height: 36px;
			}
			&::before {
				display: none;
			}
		}
	}
}

div.homepage-banner {
	@media (min-width: $nav-mobile-limit + 1) {
		background: url('img/mesdemarches06--bgr-home.jpg') center center no-repeat;
		padding: 2em 2.5em;
		display: flex;
	}
	margin-top: -1em;
}

div.homepage-banner--left, div.homepage-banner--right {
	@media (min-width: $nav-mobile-limit + 1) {
		margin: 1em;
	}
}

div.homepage-banner--left {
	@media (min-width: $nav-mobile-limit + 1) {
		background: rgba(0, 0, 0, 0.4);
		color: #fff;
		min-width: 75%;
		div.cell h2:first-child {
			padding: 0.7em 1rem;
		}
	}
	div.cell h2:first-child {
		background: transparent;
		text-transform: none;
		width: 100%;
		border: 0;
		box-sizing: border-box;
		&::before {
			display: none;
		}
		@media screen and ($max-mobile-viewport) {
			color: #000;
		}
	}
}

div.homepage-banner--right {
	font-size: 85%;
	background: rgba(255, 255, 255, 0.4);
	@media screen and ($max-mobile-viewport) {
		display: none;
	}
}
