@mixin fa-icon($utf) {
	content: "#{$utf}";
	font-family: FontAwesome;
}


$wrapper-gutter-mobile: 20px;
$wrapper-gutter-desktop: $columns-gutter * 2;

@mixin fill-viewport($add-padding-right: 0, $add-padding-left: 0) {
	@media (min-width: $width + 1) {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		padding-right: calc(50vw - 50% + #{$add-padding-right});
		padding-left: calc(50vw - 50% + #{$add-padding-left});
	}
}

.theme-wrapper {
	max-width: $width;
	width: 100%;
	margin: 0 auto;
	padding: $wrapper-gutter-mobile;
	@media ($max-mobile-viewport) {
		width: 800px;
		max-width: 100%;
	}
	@media ($min-desktop-viewport) {
		padding: $columns-gutter $wrapper-gutter-desktop;
	}
}

body {
	overflow-x: hidden;
}

//
//	HEADER
//
.site-header {
	background-color: white;
}
div#header {
	@extend .theme-wrapper;

}
#top {
	@media ($min-desktop-viewport) {
		display: flex;
		align-items: center;
	}
}
#logo {
	padding: 0;
	@media ($max-mobile-viewport) {
		text-align: center;
	}
	a {
		width: 150px;
		height: 45px;
		@media ($min-desktop-viewport) {
			width: 200px;
			height: 55px;
		}
	}
}
.header-desc {
	@media ($min-desktop-viewport) {
		flex: 1 1 auto;
		margin-left: $columns-gutter;
	}
}
.header-desc--yellow-bloc {
	background-color: $yellow;
	text-align: center;
	padding: 20px;
	border-radius: $cell-border-radius;
	position: relative;
	font-size: $fz-h3;
	font-weight: 500;
	strong {
		font-weight: 700;
	}
	@media ($min-desktop-viewport) {
		font-size: $fz-h2;
		margin: 0 auto;
		max-width: 660px;
	}
	&::after {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		border: 15px solid transparent;
		border-top-color: $yellow;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
}

// toplinks
.toplinks--wrapper {
	border-bottom: 1px solid #dcdce8;
}
#toplinks {
	// reset
	position: static;
	border: none;
	border-radius: 0;
	box-shadow: none;

	max-width: $width;
	margin: 0 auto;
	padding: 0.5em 0;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: right;
	font-size: $fz-small;

	> span  {
		display: inline-flex;
	}

	a {
		padding: 0 $columns-gutter / 2;
		display: inline-block;
		color: $font-color;
		white-space: nowrap;
		&::after {
			color: darken($gray-light, 15%);
		}

		&.login-link::after {
			@include fa-icon("\f2be");
		}
		&.registration::after {
			@include fa-icon(" \f196");
			font-size: 1.1em;
		}
		&.logout::after {
			@include fa-icon(" \f18e");
			font-size: 1.1em;
		}
		&.account-link {
			white-space: normal;
			font-size: $fz-small;
			line-height: 1.2rem;
			@media($min-desktop-viewport) {
				&::before {
					content: "Bienvenue";
					font-weight: bold;
				}
			}
		}
		&:first-child {
			border-right: 1px solid $gray-light;
		}
	}
}

//
//	PWA NAV
//	nav inside sidebar
//
.pwa-navigation {
	left: 0;
	border-top: 1px solid $gray-light;
	div > ul {
		justify-content: space-between;

		li {
			&:not(:first-child) {
				border: 1px solid $gray-light;
				border-width: 0 0 0 1px;
			}
			a {
				padding-top: 40px;
				padding-bottom: 5px;
				background-size: auto 25px;
				background-position: left 50% bottom 25px;
				span {
					display: flex;
					align-items: flex-end;
					justify-content: center;
					height: 100%;
					line-height: .9;
					font-weight: 600;
					font-size: 0.7em;

					span.badge {
						font-size: 1.1em;
					}
				}
			}
		}
		li:hover, li.selected {
			a {
				background-blend-mode: color-dodge;
				span span.badge {
					background-color: white;
				}
			}
		}
	}
}
@media ($min-desktop-viewport) {
.sidebar--pwa-navigation {
	body.pwa-display-mobile-only & {
		display: none;
	}
	.pwa-navigation {
		@media ($min-desktop-viewport) {
			border-top: none;
			margin-bottom: $columns-gutter;
			display: block;
			position: static;

			div > ul {
				flex-direction: column;

				li {
					&:not(:first-child) {
						border-width: 1px 0 0 0;
					}
					a {
						background-size: 30px auto;
						background-position: left 10px center;
						padding: 1em;
						padding-left: 65px;
						span {
							align-items: center;
							justify-content: flex-start;
							font-size: 1rem;
							font-weight: 800;

							span.badge {
								font-size: 0.7em;
								left: 30px;
							}
						}
					}
				}
			}
		}
	}
}
}

//
//	MAIN
//

// top message
.top-message--wrapper {
	background-color: $gray-message;
	@include fill-viewport();
}
.top-message {
	@extend .theme-wrapper;
	@media ($min-desktop-viewport) {
		padding-left: 0;
	}
}
.top-message--text-cell {
	& > div {
		display: flex;
		align-items: center;
		&::before {
			@include fa-icon("\f05a");
			display: block;
			font-size: 1.4em;
			text-align: center;
			color: darken($gray-message, 25);
			@media ($min-desktop-viewport) {
				flex: 0 0 $wrapper-gutter-desktop;
			}
		}
		picture {
			flex: 0 0 10em;
			line-height: 0;
			img {
				max-width: 100%;
			}
			@media ($max-mobile-viewport) {
				display: none;
			}
		}
	}
}

#columns-wrapper {
	@extend .theme-wrapper;
	max-width: 100%;
	#sidebar + & {
		@media ($min-desktop-viewport) {
			padding-right: $columns-gutter;
		}
	}
}

%sidebar {
	background-color: white;
	@media ($min-desktop-viewport) {
		padding-left: $columns-gutter;
	}
	@media (min-width: $width + 1) {
		box-sizing: content-box;
		margin-right: calc(-50vw + #{$width/2});
		padding-right: calc(50vw - #{$width/2} + #{$wrapper-gutter-desktop});
		flex-basis: calc(#{$sidebar-width} - #{$columns-gutter+$wrapper-gutter-desktop});
	}
}
.gru-content #sidebar {
	@extend .theme-wrapper;
	@extend %sidebar;
}

//
//	CELLS
//

%title {
	text-align: center;
}

$cell-additional-padding : 10px;
.gru-content div.cell {
	overflow: hidden;
	padding: $cell-additional-padding;
	padding-bottom: $cell-additional-padding * 2;
	margin-bottom: $wrapper-gutter-mobile;
	@media ($min-desktop-viewport) {
		margin-bottom: $columns-gutter;
	}

	&.foldable.folded {
		padding-bottom: 0;
	}
}

// links-lists
.gru-content {
	%cell-links-list {
		& > li > a {
			padding: 0.5rem 2rem 0.5rem 2.5rem;
			position: relative;
			&::before {
				@include fa-icon("\f0a9");
				color: $yellow;
				display: inline-block;
				position: absolute;
				left: 1em;
				width: 1em;
			}
			&:hover {
				text-decoration: underline overline $yellow;
			}
		}
		li div.description {
			padding: 0 1rem 0 1.5rem;
		}
		// Redirection Rubrique link
		li.keyword-redirection-rubrique a {
			border: 1px solid $yellow;
			border-radius: 3px;
			flex-wrap: nowrap;
			padding: 0;
			align-items: center;
			&:hover {
				text-decoration: none;
				background-color: $yellow-xlight;
			}
			&::before {
				color: black;
				background-color: $yellow;
				position: static;
				flex: 0 0 2rem;
				margin-right: 0.5rem;
				padding: .33em 0 .33em calc(1rem - 1px);
				align-self: stretch;
				display: flex;
			}
		}
	}
}

// cell picture
.gru-content div.link-list-cell.has-asset-picture,
.gru-content div.wcsformsofcategorycell.has-asset-picture {
	picture img {
		margin: 10px auto;
	}
}

// ".couleur-*" cell
.colored-cell {
	.gru-content &.link-list-cell.has-asset-picture,
	.gru-content &.wcsformsofcategorycell.has-asset-picture{
		picture {
			border-radius: $cell-border-radius $cell-border-radius 0 0;
		}
		picture, h2:first-child {
			background-color: currentColor;
			margin : -#{$cell-additional-padding + extract-width($cell-border)};
			margin-bottom: 0;
		}
		h2:first-child {
			color: white;
			position: relative;
			z-index: 1;
			&::before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 5em;
				background: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 0.5));
				z-index: -1;
			}
		}
		img {
			position: relative;
			z-index: 2;
		}
	}
}
@each $color, $hexa in $cell-header-color {
	.couleur-#{$color} {
		.gru-content &.link-list-cell.has-asset-picture,
		.gru-content &.wcsformsofcategorycell.has-asset-picture {
			@extend .colored-cell;
			picture, h2:first-child {
				background-color: $hexa;
			}
		}
	}
}

// Gray cell
.gray-cell {
	.gru-content &.cell {
		background-color: #e9e3e3;
		border: none;

		p {
			font-size: $fz-small;
		}
	}
}

#sidebar .cell {
	@extend .gray-cell; 
}

// 
//	FORMS
//
%button {
	&, &:hover {
		font-weight: 500;
		box-shadow: none;
	}
}
%button2 {
	@extend %button;
	background-color: white;
	&:hover {
		background-color: $yellow-xlight;
	}
}
%cancel-button {
	background-color: white;
	border-color: black;
	&:hover {
		background-color: $gray-xlight;
	}
}



// 
//	WCS
//
.form-content--title {
	font-size: $fz-h1;
	text-align: left;
	padding-left: 0.5rem;
}

div#rub_service {
	h2 {
		font-size: $fz-h1;
		text-align: left;
		padding-left: 0.5rem;
	}
	h3 {
		font-size: $fz-h3;
		text-transform: uppercase;
		display: flex;
		&::after {
			content: "";
			height: 2px;
			background-color: $yellow;
			display: block;
			flex: 1;
			margin-left: .66em;
			align-self: center;
		}
	}
	h4 {
		text-transform: uppercase;
	}

	.previous-button button {
		@extend %button2;
	}
}
div#gauche {
	background-color: white;
	@media ($min-desktop-viewport) {
		padding: $columns-gutter;
		width: 33%;
		+ div#rub_service {
			width: calc(66% - #{$columns-gutter});
		}
	}
	@media ($max-mobile-viewport) {
		width: auto;
		margin-left: -1 *$wrapper-gutter-mobile;
		margin-right: -1 * $wrapper-gutter-mobile;
		padding: $wrapper-gutter-mobile;
	}
}
div#tracking-code {
	background-color: #e9e3e3;
	border-radius: $cell-border-radius;
	padding: $cell-additional-padding;
	@media ($min-desktop-viewport) {
		text-align: center;
		margin-bottom: $columns-gutter;
		a {
			padding-left: 0;
		}
		button {
			margin-right: 0;
		}
	}
}
.wcs-step--marker {
	font-weight: bold;
}

//
//	FOOTER
//
#footer-wrapper {
	margin-top: 0;
	padding-bottom: 0;
}
#footer {
	padding-top: 2rem;
	.pk-button {
		color: white;
		background-color: transparent;
		&:hover {
			background-color: black;
		}
	}
	.cell {
		&[class^="grid-"],
		&[class*=" grid-"] {
			padding-bottom: 2rem;
		}
	}
	.menu-cell {
		@include fill-viewport();
		background-color: black;
		clear: both;
		padding-top: 1rem;
		padding-bottom: 1rem;
		text-transform: uppercase;
		font-size: $fz-small;
		@media (max-width: $very-small-limit) {
			li {
				display: block;
				a {
					justify-content: center;
				}
			}
		}
	}
}

//
//	Page Commune
//	custom LOGO
//
h1#custom-logo{
	@media ($max-mobile-viewport) {
		padding-left: 0;
		text-align: center;
	}
	a {
		width: auto;
		height: auto;
		display: block;
		line-height: 0;

		img {
			width: auto;
			height: auto;
			object-fit: contain;
			max-height: 150px;
			max-width: 350px;
			max-width: Min(350px, 100%);
		}
	}
}
h1#custom-logo + #logo {
	display: none;
}

