//
//	COMPONENTS
//
%button {
	box-shadow: none !important;
	font-weight: 600;
	letter-spacing: 0.03em;
}

//
//	TYPO
//

label {
	font-weight: 600;
}


//
//	HEADER
//

.site-header {
	color: white;
	a {
		color: inherit;
	}
}

#top {
	display: flex;
	align-items: baseline;
	padding-top: 0.5em;
	padding-bottom: 1em;
	@media ($max-mobile-viewport) {
		flex-direction: column;
	}
	@media ($min-desktop-viewport) {
		align-items: center;
		padding-top: 2em;
		padding-bottom: 2em;
	}
}

#logo {
	flex-grow: 1;
	font-size: $fz-3;

	&.has-logo a {
		display: flex;
	}
}

#toplinks {
	position: static;
	word-spacing: 1em;

	@media ($max-mobile-viewport) {
		padding-bottom: 1em;
		order: -1;
		max-width: none;
		align-self: flex-end;
	}

	a {
		margin-top: .25em;
		margin-bottom: .25em;
	}
}


//
//	NAV
//

.gru-nav ul {
	margin: 0;
}

// Page picture
body.has-picture .site-nav::after {
	position: static;
}


//
//	MAIN
//

main {
	padding-top: 2em;
}

//
//	CELLS
//

.gru-content div.cell {
	padding: $cell-padding;
	h2:first-child {
		display: inline-block;
		align-self: flex-start;
	}

	&.has-asset-picture {
		> div picture {
			margin: -$cell-padding;
			margin-bottom: $cell-padding;
			img {
				width: 100%;
			}
		}
		> div > h2:first-child {
			border-radius: $title-border-radius;
		}
	}
}

%cell-links-list {
	& > li > a:hover {
		text-decoration: underline;
	}
}

// green-cell
.green-cell {
	.gru-content &.cell {
		background-color: $green-xlight;
		h2:first-child {
			background-color: $green;
		}
		a {
			color: $green;
		}
	}
}

// Télécommande
.telecommande {
	.gru-content &.link-list-cell {
		--telecommande-color: #{$blue-dark};
		background-color: transparent;
		padding: 0;
		text-align: center;
		text-transform: uppercase;
		h2:first-child {
			display: block;
			border-radius: 0;
			background-color: var(--telecommande-color);
			color: white;
			font-weight: 900;
			text-transform: uppercase;
			margin-bottom: 0.33rem;
		}
		.links-list ul {
			display: flex;
			flex-wrap: wrap;
			gap: 0.33rem;
			> li {
				flex: 1 0 4em;
				border: none;
				display: flex;
			}
			> li > a {
				flex-grow: 1;
				background-color: var(--telecommande-color);
				color: white;
				font-weight: bold;
				font-size: $fz-small;
				justify-content: center;
				align-items: center;
			}

			// icons options
			li.icon-sos {
				> a::after {
					content: "";
					display: block;
					width: 3rem;
					height: 3rem;
					background: url(icons/sos.png) no-repeat center transparent;
					background-size: contain;
					margin-top: 0.5em;
				}
			}

		}
		// Colors options
		&.color-green {
			--telecommande-color: #{$tc-green};
		}
	}
}

//
//	WCS
//

div#tracking-code {
	background-color: $gray-xlight;
	h3 {
		background-color: transparent;
		color: $font-color;
	}
	a {
		color: $link-color;
	}
}

div#rub_service {
	h3 {
		font-size: $fz-3;
		border-bottom: none;
	}
	h4 {
		font-size: $fz-4;
	}
}


//
//	PWA
//

.pwa-navigation div > ul li a span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: $fz-small;
}
