/*
====================
Style pour tout les menu
====================
*/

@import url(../style.css);

#header {
	transition: all 0.5s ease-in;

	#headerContainer {
		position: absolute;
		width: 100%;
		top: 0;
		height: 700px;
		@media screen and (max-width: 1024px) {
			height:300px;
		}

		#top_header {
			margin: auto;
			position: sticky;
			top: 0;
			transition: all 0.5s ease-in;
			.wpml-ls-link{
				color:#fff;
				padding-right:30px;
				&:hover{
					color:var(--bleu);
				}
			}
			.menuTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 109px;
				width: 95%;
				margin: auto;

				.menu-droite {
					display: flex;
					align-items: center;

					p {
						padding-right: 20px;
						color: white;
					}

					svg {
						cursor: pointer;
					}
				}
			}

			.menuBottom {
				padding-bottom: 20px;
				position: relative;

				.lienMenu {
					color: white;
					width: 80px;        
  					flex: 0 0 80px;    
					white-space: nowrap;
				}

				.lienMenusolutions {
					color: white;
					width: 150px;        
  					flex: 0 0 150px;    
					white-space: nowrap;
				}

				.lienMenuflex {
					color: white;
					flex: unset;    
					width: auto;  
					margin: 10px !important;
				}

				p {
					font-size: 16px;
					font-style: normal;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: -0.4px;
					text-decoration: none;
					color: white;
				}

				#mainMenu {
					display: none;
					position: relative;
					transition: all 0.5s;
					align-items: center;
					gap: 80px;
					margin-left: 75px;
					margin-bottom: 13.25px;
					transition: all 0.5s ease-in;
					flex-wrap: wrap;

				}

				#solutionsMenu {
					display: none;
					transition: all 0.5s;
					list-style: none;
					position: absolute;
					top: 30px;
					left: 310px;
					margin: 0;
					padding: 0;
					a {
						text-decoration: none;

						li {
							margin: 8px 0;
							color: white;
							font-size: 14px;
						}
					}

					strong {
						display: inline-block;
						margin-bottom: 4px;
						font-weight: 600;
					}
				}

				hr {
					width: 95%;
					margin: auto;
				}
			}
		}
	}
}


.open {
	min-height: 425px;
	background-color: black;
	transition: all 0.5s ease-in;
}

@media screen and (max-width: 900px) {
	#header {
		#headerContainer {
			height: auto;

			#top_header {
				.menuTop {
					height: auto;
					padding: 20px 0;
					align-items: flex-start;

					.menu-droite {
						p {
							display: none;
						}
					}
				}

				.menuBottom {
					padding-bottom: 16px;

					#mainMenu {
						flex-direction: column;
						flex-wrap: nowrap;
						justify-content: flex-start;
						align-items: flex-start;
						gap: 5px;
						margin: 0 20px 12px 20px;

						.lienMenu,
						p {
							display: block;
							width: auto;
							min-width: 0;
							flex: 0 0 auto;
							font-size: 20px;
							line-height: 1.1;
							padding: 0 !important;
							margin: 5px !important;
							white-space: nowrap;
						}

						.lienMenusolutions {
						color: white;
						width: auto;
						min-width: 0;
						flex: 0 0 auto;
						white-space: nowrap;
						}

						#solutionsMenu {
							position: static;
							width: auto;
							margin: 0 0 0 38px;
							padding: 0;
							display: none;
							list-style: none;

							a {
								display: block;
								text-decoration: none;
							}

							li {
								margin: 0 0 16px 0;
								font-size: 16px;
								line-height: 1.25;
								color: white;
							}

							strong {
								display: inline-block;
								margin-bottom: 4px;
								font-weight: 600;
							}
						}
					}

					hr {
						display: none;
					}
				}
			}
		}
	}

	.open {
		min-height: auto;
	}
}