@import '../includes/fonts/oswald';
@import '../includes/fonts/cantarell';

.site-nav {
	display: none;
}

#header-pre {
	background: $primary-color;
	padding: 2rem 0;
	> div {
		max-width: $width;
		margin: 0 auto;
	}
	@media screen and ($max-mobile-viewport) {
		text-align: center;
	}
}

#toplinks {
	top: -6rem;
	font-size: 1.25rem;
	@media screen and ($max-mobile-viewport) {
		top: -9.5rem;
		font-size: 1rem;
	}
	background: transparent;
	span.login {
		display: inline-block;
		padding-left: 50px;
		background: transparent url(img/connexion.png) 0 0 no-repeat;
		height: 50px;
		background-size: 40px;
		a {
			position: relative;
			top: 5px;
		}
		@media screen and ($max-mobile-viewport) {
			padding-left: 0;
			background: none;
			height: auto;
			a {
				position: static;
			}
		}
	}
	box-shadow: none;
	a {
		color: white;
	}
}

.page-template-homepage .gru-content {
	flex-wrap: wrap;
}

#logo {
	@media screen and ($max-mobile-viewport) {
		text-align: center;
	}
	padding: 2rem 0;
	font-family: Oswald;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 3rem;
}

div#section-une {
	background-size: cover;
	padding: 2rem;
	@media screen and ($max-mobile-viewport) {
		padding: 1rem;
	}
	&::after {
		content: "";
		display: block;
		clear: both;
		height: 2rem;
	}
	div#une {
		position: relative;
		float: left;
		width: 50%;
		height: 100%;
		padding: 2rem 4rem;
		@media screen and ($max-mobile-viewport) {
			padding: 1rem 0rem;
			float: none;
			width: auto;
			height: auto;
			margin: 1rem 0;
			img {
				max-width: 30%;
			}
		}
		h2 {
			position: absolute;
			bottom: 1rem;
			@media screen and ($max-mobile-viewport) {
				position: static;
			}
			&::before {
				content: "";
				background: $secondary-color;
				display: block;
				width: 50px;
				height: 3px;
				position: relative;
				top: -10px;
				@media screen and ($max-mobile-viewport) {
					content: none;
				}
			}
			&::after {
				content: none;
				@media screen and ($max-mobile-viewport) {
					content: "";
				}
			}
		}
	}
	div.cell {
		float: right;
		width: 25%;
		@media ($min-desktop-viewport) {
			margin-left: #{$columns-gutter / 2};
			margin-right: #{$columns-gutter / 2};
		}
		@media screen and ($max-mobile-viewport) {
			float: none;
			width: auto;
			margin: 1rem 0;
			max-width: 100%;
		}
		background: $primary-color;
		color: white;
		h2 {
			background: url(img/mon-compte.png) 5px 5px no-repeat;
			background-size: 40px;
			color: white;
			font-size: 2rem;
			padding-left: 50px;
			&::after {
				content: "";
				background: $secondary-color;
				display: block;
				width: 50px;
				height: 3px;
				position: relative;
				top: 0px;
				left: 0;
			}
		}
		&.trackingcodeinputcell h2 {
			background-image: url(img/connexion.png);
		}
		&.une h2 {
			background-image: none;
			padding-left: 0;
		}
		a {
			color: white;
		}
	}
}

.wcs-tracking-code-input {
	p {
		display: none;
	}
	form {
		display: flex;
		@media screen and ($max-mobile-viewport) {
			display: block;
			padding-bottom: 1rem;
		}
		button {
			background: $secondary-color;
			color: white;
			&:hover {
				background: darken($secondary-color, 20%);
			}
		}
	}

}

#content .wcsformsofcategorycell {
	margin-top: 2rem;
	h2 {
		text-align: center;
		color: $secondary-color;
		font-size: 1.5rem;
		margin-top: 0;
	}
	picture {
		text-align: center;
		display: block;
		img {
			display: inline-block;
		}
	}
}

%cell-links-list {
	li {
		&:last-child::after {
			content: none;
		}
		&::after {
			content: '';
			margin-left: 1rem;
			display: block;
			background: $secondary-color;
			height: 2px;
			width: 30px;
			transition: width ease 0.4s;
		}
		&:hover::after {
			width: calc(100% - 2rem);
		}
	}
}


.cell-bordered {
	.gru-content &.cell {
		border: 1px solid $primary-color;
	}
}

.cell-green {
	.gru-content &.cell {
		background-color: #e5f2f0;
		a {
			color: #01516a;
		}
		div.links-list ul > li > a:hover {
			color: $cell-entry-hover-color
		}
	}
}

.cell-red-title {
	.gru-content &.cell {
		h2:first-child {
			color: $secondary-color;
		}
	}
}

div#rub_service {
	h2 {
		text-align: left;
		&:first-child::after {
			content: '';
			margin-left: 0rem;
			display: block;
			background: $secondary-color;
			height: 2px;
			width: 30px;
		}
	}
	form, div.dataview {
		h3, h4 {
			font-family: Oswald;
			font-weight: 300;
			text-transform: uppercase;
		}
		h3 {
			font-size: 1.375rem;
			color: $secondary-color;
			margin-top: 2rem;
		}
		h4 {
			color: $link-color;
		}
	}
}

div.timetable-widget span.timetable-cell.selectable.on {
	background: $secondary-color;
}

div#rub_service div.buttons {
	div.previous-button {
		float: left;
	}
	div.cancel-button {
		float: right;
		button {
			border: 1px solid $primary-color;
			background: white;
			color: $font-color;
		}
	}
}

#footer {
	.footer-right-links {
		a {
			color: #456e7c;
			img {
				width: 40px;
				height: 40px;
				position: relative;
				top: 15px;
			}
			padding-left: 2rem;
		}
	}
	div.menucell {
		text-align: right;
		padding-top: 1rem;
		padding-right: 2rem;
		ul li::after {
			content: none;
		}
		li a {
			color: $primary-color;
		}
	}
}

div.textcell.encart-alerte {
	background: #bed3d5;
	margin-top: 2rem;
	color: $primary-color;
	font-size: 120%;
	text-align: center;
	> div {
		max-width: 80ex;
		margin: auto;
	}
}

.pwa-navigation div {
	box-shadow: 0 0 5px #666;
	> ul li a {
		padding-top: 36px;
	}
}