♻️ Refactor StopsSearchMenu + load Map lazily + placeholder

frontend/src/stopsSearchMenu/stopsSearchMenu.scss

@@ -0,0 +1,85 @@
+@use "../_common";
+@use "../_utils";
+
+
+.mapPlaceholder {
+	--border-width: 0.1vh;
+
+	height: calc(100% - 2*var(--border-width));
+	width: 50%;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	border: solid var(--neutral-color) var(--border-width);
+	border-radius: var(--border-radius);
+
+	background-color: var(--idfm-black);
+	font-family: IDFVoyageur-bold;
+	font-size: 2vh;
+	color: var(--idfm-white);
+}
+
+.stopNameInput {
+	width: 50%;
+	height: 60%;
+
+	display: flex;
+	flex-flow: row;
+
+	border: solid var(--neutral-color) calc(0.01vh);
+	border-radius: var(--border-radius);
+
+	background-color: transparent;
+
+	.leftAddon {
+		width: 17%;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		background-color: var(--idfm-white);
+	}
+
+	input {
+		width: 83%;
+
+		padding-left: 3%;
+		padding-right: 3%;
+			
+		color: var(--idfm-white);
+		font-family: IDFVoyageur-regular;
+		background-color: transparent;
+	}
+}
+
+.title {
+	@extend %title;
+	
+	display: flex;
+	justify-content: center;
+}
+
+.stopSearchMenu {
+	@extend %widget;
+	
+	.body {
+		@extend %body;
+
+		flex-direction: row;
+
+		.stopsPanels {
+			width: 50%;
+			height: 100%;
+
+			scroll-snap-type: y mandatory;
+			overflow-y: scroll;
+
+			.displayed {
+				display: block;
+			}
+		}
+	}
+}