//
//	Utils
//
@mixin fill-viewport() {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		padding-right: calc(50vw - 50%);
		padding-left: calc(50vw - 50%);
}

//
//	TYPO
//

html {
	overflow-x: hidden;
	@media ($max-mobile-viewport) {
		font-size: 100% / ( 16 / $base-font-m );
	}
}
%title {
	border-bottom: 1px dotted;
	font-size: $fz-2m;
	@media ($min-desktop-viewport) {
		font-size: $fz-2;
	}
}
h1, .h1 {
	font-size: $fz-1m;
	font-weight: normal;
	@media ($min-desktop-viewport) {
		font-size: $fz-1;
	}
}
h2, .h2 {
	font-size: $fz-2m;
	@media ($min-desktop-viewport) {
		font-size: $fz-2;
	}
}
h3, .h3 {
	font-size: $fz-3m;
	@media ($min-desktop-viewport) {
		font-size: $fz-3;
	}

}
.small {
	font-size: $fz-smallm;
	@media ($min-desktop-viewport) {
		font-size: $fz-small;
	}
}

//
//	Components
//

%button {
	display: inline-block;
	text-transform: uppercase;
	font-weight: 700;
	box-shadow: none !important;
	&:hover {
		text-decoration: none;
	}
}
.gray-button {
	@extend .button;
	background-color: $gray;
}
%button-arrow {
	@extend %button;
	&::before,
	&::after {
		content: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-family: fontAwesome;
		font-size: 0.5em;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		border: 1px solid;
		vertical-align: 0.4em;
	}
}
%button-arrow-right {
	@extend %button-arrow;
	&::after {
		content: "\f061"; // arrow right
		margin-left: .66em;
	}
}
%button-arrow-left {
	@extend %button-arrow;
	&::before {
		content: "\f060"; // arrow left
		margin-right: .66em;
	}
}
@mixin floating-nav {
	position: absolute;
	width: 100%;
	min-width: 15em;
	border: 1px solid $primary-color;
	background-color: white;
	box-shadow: 0 3px 4px hsla(0, 0%, 0%, 0.25);
}
%chevron-link {
	position: relative;
	padding: 1em 1em 1em 2.5em;
	&::before {
		content: "\f054"; // chevron right
		font-family: fontAwesome, roboto, sans-serif;
		font-size: $fz-small;
		position: absolute;
		left: 1em;
		color: $cyan;
	}
}
%nav-chevron-link {
	@extend %chevron-link;
	display: block;
	border-bottom: 1px dashed  #000;
	color: black;
	font-weight: 700;
	text-transform: none;
	&:hover {
		color: white;
		background-color: $primary-color;
		text-decoration: none;
		&::before {
			color: currentColor;
		}
	}
}
.page-title {
	@extend .h1;
	color: $primary-color;
	padding-bottom: 2rem;
	padding-left: 0;
	border-bottom: 1px dashed $gray;
	margin-bottom: 3rem;
}
.trapeze-title {
	overflow: hidden;
	&::before {
		content:"";
		@extend .h2;
		display: inline-block;
		height: 0.9em;
		background-color: $cyan;
		transform: skewX(-30deg);
		transform-origin: top right;
		vertical-align: text-top;
		width: $cell-image-size;
		margin-right: 0.5em;
	}
}
@mixin mask($zindex) {
	position: fixed;
	z-index: $zindex;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: hsla(0, 0%, 0%, 0.25);
	display: none;
}

.pk-table-headers {
	&.pk-data-table, .pk-data-table {
		thead th {
			vertical-align: bottom;
		}
	}
}

//
//	HEADER
//

.site-header {
	border-top: $top-gray-line-height-m solid $gray-dark;
	@media ($min-desktop-viewport) {
		border-width: $top-gray-line-height;
	}
}
#top {
	display: flex;
}

// logo & site title
.header--cd06-link {
	margin-right: 0;
	width: nth($header-logo-size, 1);
	height: nth($header-logo-size, 2);
	@media ($min-desktop-viewport) {
		width: 136px;
		height: 150px;
	}
}
#logo.has-logo {
	flex-grow: 1;
	font-weight: 700;
	align-self: center;
	margin: $nav-item-padding;
	font-size: 18rem / $base-font;
	@media ($min-desktop-viewport) {
		font-size: 24rem / $base-font;
		align-self: flex-end;
		border-left: 1px solid #000;
		padding-left: 0.75rem;
	}
	a {
		color: black;
		&::before {
			content: none;
		}
		&:hover {
			text-decoration: none;
		}
	}
}
// Top links
#toplinks {
	text-align: left;
	z-index: 110;
	@media ($min-desktop-viewport) {
		margin-top: -$top-gray-line-height;
	}
	@media ($max-mobile-viewport) {
		position: relative;
		align-self: center;
	}
	.toplinks-icon {
		width: 25px;
		height: 25px;
		fill: currentcolor;
		vertical-align: -0.5em;
		& + * {
			margin-left: .66em;
		}
	}
	a.registration,
	a.user-info--separator {
		display: none;
	}
	a:not(.login-link) {
		@extend %nav-chevron-link;
	}
	a.logout {
		border-bottom: none;
	}
	a.login-link,
	.toplinks--togglable-btn {
		@extend %button;
		margin-right: 0;
		@media ($max-mobile-viewport) {
			&, &:hover {
				background-color: white;
				color: $primary-color;
			}
		}
	}
	.toplinks--togglable-menu {
		z-index: 100;
		top: 100%;
		@media ($max-mobile-viewport) {
			right: 0;
		}
		@include floating-nav;
		display: none;
		margin: 0;
		padding: 0;
		list-style: none;
		.toplinks--list-item {
			display: block;
		}
	}
	.toplinks--panel-mask {
		@include mask(-1);
		background-color: transparent;
	}
	.toplinks--togglable-btn.toggled {
		+ .toplinks--togglable-menu,
		~ .toplinks--panel-mask {
			display: block;
		}
	}
}
// Nav
.site-nav {
	align-self: flex-end;
}
div.gru-nav > ul {
	margin: 0;
}
div.gru-nav > ul > li a {
	padding: $nav-item-padding;
	@media ($max-mobile-viewport) {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
}
div.gru-nav > ul ul {
	@media ($min-desktop-viewport) {
		@include floating-nav;
		width: auto;
	}
}
div.gru-nav > ul ul > li a {
	@extend %nav-chevron-link;
	@media ($max-mobile-viewport) {
		border-bottom: 0 none;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		&:hover {
			background-color: transparent;
			color: $primary-color;
		}
	}
}
@media ($max-mobile-viewport) {
	// right-to-left adaptation
	@if $responsive-menu == left-to-right {
		#logo {
			padding-left: 0;
		}
		div#header {
			padding-right: $nav-menu-side;
		}
		div.gru-nav .gru-nav-button {
			left: auto;
			right: 0;
			top: $top-gray-line-height-m;
			border: 14px solid transparent;
			+ ul {
				padding-left: .5em;
				padding-right: .5em;
				transform: translateX(100%);
				left: auto;
				right: 0;
				border-left: 2px solid $primary-color;
			}
			~ .gru-nav-mask {
				@include mask(1999)
			}
			&.toggled {
				.icon-bar {
					background-color: $primary-color;
				}
				~ .gru-nav-mask {
					display: block;
				}
			}
		}
	}
}


//
//	HOME PAGE BANNER
//

.homepage-banner {
	line-height: $font-line-height;
	@media ($max-mobile-viewport) {
		text-align: center
	}
	@media ($min-desktop-viewport) {
		background-image: var(--page-picture);
		background-position: center;
		background-size: cover;
	}
}
.homepage-banner--wrapper {
	@media ($min-desktop-viewport) {
		padding: 2em 2.5em;
	}
}
.homepage-banner--content {
	@media ($min-desktop-viewport) {
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		margin: 1.5em;
		div.textcell {
			padding: 1em;
		}
	}
}

//
//	MAIN
//

main {
	margin-top: 2em;
}

#main-content {
	@media ($min-desktop-viewport) {
		padding: 0 0.7em;
	}
}

div#main-content-wrapper {
	z-index: auto;
}

// placeholder 'page-title'
.cd06-page-title--wrapper {
	@media ($max-mobile-viewport) {
		padding: 0 0.7em;
	}
	.cd06-page-title--default,
	.text-cell h1 {
		@extend .page-title;
		margin-left: 0;
		margin-right: 0;
	}
	.text-cell + .cd06-page-title--default {
		display: none;
	}
}

// placeholder 'columns bottom'
// gray and bg full viewport if not sidebar
body:not([class*="sidebar"])
.combo-placeholder--columns-bottom {
	margin-top: 2rem;
	background-color: $gray-xlight;
	padding-top: 2rem;
	padding-bottom: 2rem;
	@include fill-viewport;
}


//
//	CELLS
//

%cell {
	overflow: hidden;
	@media ($min-desktop-viewport) {
		padding-left: $cell-image-size;
	}

	&:not(.has-asset-picture) > div h2:first-child::before {
		@extend .trapeze-title;
		position: absolute;
		bottom: 0;
		top: 0;
		margin: auto;
		right: 100%;
	}
	&.has-asset-picture > div {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		> * {
			flex: 0 0 100%;
		}
		> h2:first-child {
			flex: 1 0 50%;
		}
		> picture {
			order: -1;
			display: block;
			flex: 0 0 $cell-image-size;
			align-self: center;
			position: relative;
			z-index: 1;
			@media ($min-desktop-viewport) {
				margin-left: -$cell-image-size;
			}
			img {
				@extend .h2;
				padding: 0;
				object-fit: contain;
				height: 1.2em;
				width: $cell-image-size;
			}
		}
	}
}

%cell-links-list {
	& > li > a {
		@extend %chevron-link;
		&:hover {
			text-decoration: underline;
		}
	}
	// custom class .voir-plus
	& > li.voir-plus {
		padding: 1em;
		@media ($max-mobile-viewport) {
			text-align: center
		}
		> a {
			&::before {
				content: none;
			}
			@extend %button-arrow-right;
		}
	}
}
div.cell.foldable > div > h2:first-child::after {
	right: 0;
	color: $cyan;
}
div.links-list li.required-authentication a {
	flex-wrap: nowrap;
	&::after {
		position: static;
		content: "\f023"; // lock
		color: inherit;
		margin-left: 0.66rem;
		font-size: 1.2em;
		align-self: flex-start;
	}
}
div.textcell {
	h1 {
		margin: 0.7em 1rem;
	}
	p > a.pk-button {
		margin-top: 1.4em;
		margin-bottom: 1.4em;
	}
}
.gru-content div.tracking-code-input-cell form input {
	border-width: 0 0 extract-width($widget-border) 0;
	&:not(:focus) {
		background-color: transparent;
	}
}
#mon-espace + .tracking-code-input-cell {
	h2:first-child {
		display: none;
		+ div {
			padding-top: 0;
		}
	}
}
.pk-cell-center-title {
	.gru-content &.cell > div h2:first-child {
		border-bottom: none;
		&::before {
			content: none;
		}
	}
}

// Custom cell class
.gray-cell {
	.gru-content &.cell {
		background-color: $gray-xlight;
	}
}
.buttons-list {
	div.links-list ul {
		padding-top: 0.5em;
		margin: 1em $cell-image-size;
		@media ($min-desktop-viewport) {
			margin-left: 0.5em;
		}
		> li {
			border: none !important;
			padding: 0.5em;
			> a {
				&::before {
					content: none;
				}
				@extend %button;
				margin-right: 0;
				display: block;
			}
		}
	}
}
.inline-buttons-list {
	@extend .buttons-list;
	div.links-list ul {
		display: flex;
		flex-wrap: wrap;
		> li {
			min-width: fit-content;
			flex: 1 0 0;
			> a {
				margin-left: 0;
			}
		}
	}
}
.bordered-cell {
	.gru-content &.cell {
		background-color: transparent;
		border: 1px solid $cyan;
		h2:first-child {
			border: none;
			&::before {
				content: none !important;
			}
		}
	}
}


// Social steps
.social-steps ol {
	display: flex;
	padding: 0 1em;
	justify-content: center;
	list-style-type: none;
	li {
		position: relative;
		z-index: 0;
		width: 15%;
		min-width: 5em;
		margin: 0 1em;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		border-bottom: 0;
		color: $primary-color;
		@media ($max-mobile-viewport) {
			min-width: 3em;
		}
		.marker {
			@extend .h3;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid $primary-color;
			border-radius: 50%;
			width: 2em;
			height: 2em;
		}
		.label {
			margin-top: .5em;
			display: block;
			width: 100%;
			text-align: center;
			font-size: $fz-small;
			@media ($max-mobile-viewport) {
				display: none;
			}
		}
		&.current {
			.marker {
				background: $primary-color;
				color: #fff;
			}
			.label {
				font-weight: bold;
			}
		}
		&:not(:last-child) {
			&::after {
				content: '';
				border: 1px solid $gray;
				width: calc(100% - 2em);
				position: absolute;
				z-index: -1;
				top: 1.2em;
				right: 0;
				display: block;
				transform: translateX(calc(50% + 1em));
			}
		}
	}
}

//
// Footer
//

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

div#footer-wrapper {
	margin-top: 0;
	padding: 0;
}
div#footer{
	background: $footer-background url('img/footer.png') no-repeat;
	background-position: right 230px top 0;
	background-size: contain;
	padding-bottom: 3rem;
	padding-right: 300px;
	@media ($max-mobile-viewport) {
		background-size: auto calc(100% - 45px);
		background-position: bottom right;
		padding-right: 250px;
	}
	@media (max-width: $very-small-limit) {
		background-size: 30% auto;
		padding-right: 30%;
	}
	@media ($min-desktop-viewport) {
		min-height: 200px;
	}
	a {
		color: #fff;
	}
	ul {
		padding-left: 0;
		margin-left: 1rem;
	}
	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;
		}
	}
}
// Partners logos
$mobile-partners-block-height: 120px;
footer {
	@media ($max-mobile-viewport) {
		padding-top: $mobile-partners-block-height;
	}
}
.footer-logos-partners {
	.partner-link {
		display: inline-block;
		background-color: #fff;
		padding: 0.7rem;
		img {
			height: 70px;
			width: auto;
		}
	}
	@media ($max-mobile-viewport) {
		margin: 0 !important;
		position: absolute;
		bottom: 100%;
		left: 0;
		float: none;
		width: 100%;
		display: flex;
		justify-content: center;
	}
}
// social medias
div#footer {
	position: relative;
	padding-top: 1em;

	@media ($max-mobile-viewport) {
		padding-top: 45px;
	}
	div.social-media {
		position: absolute;
		top: 0;
		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;
			}
		}
	}
}

//
//	WCS / FORMS
//

.form-content--title {
	@extend .page-title;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	text-transform: none;
}
div.widget div.title {
	font-weight: 700;
	margin-bottom: 0.8rem;
}
span.required {
	color: $error-color;
}
.form-content--sidebox {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.form-content--sidebox #tracking-code {
	font-size: 1em;
	order: 0;
	* {
		display: inline-block;
		vertical-align: middle;
	}
	h3, a {
		@extend .h3;
	}
	h3 {
		@extend .trapeze-title;
		border-bottom: 0;
		padding-bottom: 0;
		padding-top: 0;
		padding-left: 0;
	}
	a {
		font-weight: bold;
	}
	div.tracking-code-part + form {
		margin-top: 0;
	}
}

.form-content--body {
	h3 {
		@extend .trapeze-title;
		color: $cyan-dark;
		font-size: $fz-2;
	}
}

//
//	CUSTOM STEPS
//

.theme-steps {
	text-align: left;
	&--page-nb {
		color: #00444B;
		font-weight: normal;
	}
	&--title {
		@extend %title;
		padding-left: 0;
		text-transform: uppercase;
		display: block !important;
		border-bottom: none;
	}
	&--progress-bar {
		@extend .h3;
		height: 1em;
		background-color: $gray-light;
		background-image: linear-gradient(
			to right,
			$cyan var(--gradient-stop, 1%),
			transparent var(--gradient-stop, 1%)
		);
		border-radius: 5px;
	}
	&--voir-etapes {
		color: $primary-color;
		text-align: right;
	}
	&--voir {
		&::before {
			content: "\f06e";
			font-family: fontAwesome;
		}
	}
	&--panel {
		position: fixed;
		z-index: 3001;
		height: 100vh;
		overflow-y: auto;
		right: 0;
		top: 0;
		background-color: white;
		padding: 2rem;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		&-close {
			@extend %title;
			padding: 0;
			border-bottom: none;
			display: block;
			text-align: right;
			margin-bottom: 2em;
			&-icon {
				&::before {
					@extend .h3;
					color: $cyan;
					content: "\00A0\f00d"; // x-cross
					font-family: fontAwesome;
				}
			}
		}
		&-mask {
			@include mask(3000);
		}
		&-title {
			@extend %title;
			@extend .trapeze-title;
			padding-left: 0;
			border-bottom: none;
			margin-bottom: 1em;
		}
	}
	// toogled
	&--voir-etapes.toggled + &--panel {
		transform: translateX(0);
	}
	&--voir-etapes.toggled ~ &--panel-mask {
		display: block;
	}
}

@include vertical-steps();
@if (str-index('#{$wcs-step-marker-type}', 'tied')) {
	@include tied-vertical-steps();
}
.theme-steps--panel h2 {
	@extend %title;
	@extend .trapeze-title;
	border-bottom: 0;
	display: block;
	padding-left: 0;
	margin-bottom: 1em;
}
.wcs-steps {
	font-size: 1em;
	&--list {
		font-family: $title-font-family;
	}
}
.wcs-step {
	@extend .h2;
	&::before {
		content: "";
		display: block;
		width: calc( #{$wcs-steps-spacing} - 1rem );
		height: 1px;
		background-color: currentColor;
		order: 1;
		margin: 0.5rem;
		align-self: center;
	}
	&--label {
		@extend .small;
		font-weight: bold;
		text-align: left;
		width: auto;
		order: 2;
		margin-left: 0;
	}
	&--marker {
		border: 1px solid;
		box-shadow: 0 0 0 0.5rem white;
	}
	&.current &--marker {
		font-weight: normal;
		border-color: $gray-dark;
	}
	&.step-before &--marker {
		color: $gray;
		border-color: $gray;
	}
}


//
//	a2
//

.a2-block {
	max-width: none;
	margin-top: 0;
	margin-bottom: 1em;

	form {
		max-width: 45em;
	}
	form, p {
		margin-left: 0;
		margin-right: 0;
	}
}
.block-saml button.cd06-adfs {
	&, &:hover {
		border: 0;
		padding: 3px;
		padding-bottom: 0;
		background-color: transparent;
		box-shadow: inset 0 0 10px $gray !important;
		border-radius: 15px;
		&:hover {
			box-shadow: inset 0 0 10px $cyan-dark !important;
		}
	}
}


//
//	PWA NAV
//

.pwa-navigation {
	div > ul {
		padding-top: 6px;
		border-top: 2px solid #D1D1D1;
		li {
			&:not(:last-child) {
				border-right: 1px dashed $primary-color;
			}
			&.selected {
				font-weight: bold;
				position: relative;
				&::before {
					content: "";
					display: block;
					position: absolute;
					height: 4px;
					width: 80%;
					margin: 0 auto;
					top: 0;
					left: 0;
					right: 0;
					background-color: $primary-color;
					transform: translateY(-8px);
				}
			}
			a {
				background-size: auto 25px;
				background-position: 50% 5px;
				padding-top: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				span {
					height: auto;
					font-size: $fz-small;
				}
			}
		}
	}
}

