$subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, tourisme, sport, musees, carte-culture, support-carte, chargeur-individuel, souscription-et-suivi;

#content {
	.menucell.categories-demandes {
		@each $category in (mobilite, sports-et-loisirs, culture) {
				&.#{$category} {
					div > ul > li {
					display: none;
					&.selected {
						display: flex;
						flex-direction: row;
						@media screen and ($max-mobile-viewport) {
							flex-direction: column;
						}
					}
				}
			}
		}
		div {
			// list of top level categories
			> ul {
				display: flex;
				flex-direction: column;
				> li {
					@extend %homepage-block-color;
					margin-bottom: 4px;
					&:last-child {
						margin-bottom: 0;
					}
					&:hover {
						@extend %homepage-block-hover;
						> a, > ul {
							@extend %homepage-block-hover;
						}
					}
					> a {
						@extend %homepage-block-color;
						border: none;
						font-size: calc(1vw + 1em);
					}
					// list of sub-categories
					ul {
						display: flex;
						flex-direction: column;
						@extend %homepage-block-color;
						&:hover {
							@extend %homepage-block-hover;
						}
						li {
							@extend %homepage-block-color;
							border-bottom: 2px solid $cell-background;
							border-top: 2px solid $cell-background;
							border-left: 0;
							border-right: 0;
							height: 5em;
							&:first-child {
								border-top:   4px solid $cell-background;
							}
							&:target, &:hover {
								@extend %homepage-block-hover;
								a {
									@extend %homepage-block-hover;
								}
							}
							a {
								@extend %homepage-block-color;
								display: block;
								padding: 0.1em 0.5em 0.1em 25%;
								height: 100%;
								text-transform: capitalize;
								overflow: hidden;
								text-overflow: ellipsis;
								&::before {
									content: ' ';
									position: absolute;
									top: 0.3em;
									left: 0;
									height: 80%;
									width: 25%;
								}
								// inner-text
								span {
									font-family: "Source Sans Pro", sans-serif;
									font-weight: normal;
									font-size: calc(0.8vw + 0.8em);
									line-height: 4em;
								}
							}
							// Declare the right class name within the following list
							@each $page in $subpages {
								&.menu-#{$page} {
									&:hover {
										a::before {
											background-image: url("img/#{$page}-hover.png");
										}
									}
									a::before {
										background-image: url("img/#{$page}.png");
										background-position: center center;
										background-size: contain;
										background-repeat: no-repeat;
									}
								}
							}
						}
					}
				}
			}
			@media screen and ($min-desktop-viewport) {
				> ul {
					> li {
						display: flex;
						flex-direction: row;
						border-left: 5px solid $body-background;

						&:hover {
							border-left: $menucell-hover-border;
						}
						a {
							flex-grow: 1;
							margin-top: auto;
							margin-bottom: auto;
						}
						ul {
							flex-grow: 1;
							flex-basis: 70%;
							flex-direction: row;
							justify-content: flex-end;
							flex-wrap: nowrap;
							margin-left: auto;
							li {
								display: flex;
								flex-direction: row;
								flex-basis: 10em;
								border-left: 4px solid $cell-background;
								border-right: 0;
								border-bottom: 0;
								border-top: 0;
								height: 10em;
								margin-bottom: 0;
								&:first-child {
									border-bottom: 0;
									border-top: 0;
								}
								a {
									padding: 5em 0.5em 0.5rem 0.5rem;
									text-align: center;
									&::before {
										content: ' ';
										position: absolute;
										top: 10%;
										left: 25%;
										height: 40%;
										width: 50%;
									}
									span {
										font-size: calc(0.8vw + 0.3em);
										line-height: normal;
									}
								}
							}
						}
					}
				}
			}
		}
		&.categorie-demandes div > ul > li {
			display: none;
			&.selected {
				display: flex;
				flex-direction: column;
				@media screen and ($min-desktop-viewport) {
					flex-direction: row;
				}
			}
		}
	}
}

@each $page in $subpages {
	body.page-#{$page} {
		#content div.menucell.categories-demandes li.menu-#{$page} a {
			background-color: #999999;
			color: #FFFFFF;
			&::before {
				background-image: url("img/#{$page}-hover.png");
			}
		}
	}
}