/*
	gest-menu.css
	Origine: https://www.youtube.com/watch?v=S-VeYcOCFZw
*/

.header{
	background-color: #F3F3F3;
	display: flex;
	align-items: baseline;
	padding: .5rem;
	gap: 1rem;
	margin-top: 3em;
	color: #000;
}

.link{
	background: none;
	border: none;
	text-decoration: none;
	color: #777;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	padding: 0.4em;
}

.dropdown-heading{
	color: #000;
	font-weight: 800;
}

.dropdown.active > .link,
.link:hover{
	color: white;
	background: blue;
	padding: 0.4em;
	border-radius: 4px;
}

.dropdown{
	position: relative;
}

.dropdown-menu{
	position: absolute;
	left: 0;
	top: calc(100% + .25rem);
	color: #000;
	background-color: white;
	padding: .75rem;
	border-radius: .25rem;
	box-shadow: 0 2px 5px O rgba(0, 0, 0, .1);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.dropdown.active .link + .dropdown-menu{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.information-grid{
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 2rem;
}
.dropdown-links{
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.login-form > input{
	margin-bottom: .5rem;
}
.login-form label{
	color: #000;
}
.login-form button{
	color: #000;
	padding: .75em;
	border-radius: 4px;
	cursor: pointer;
}
/* 
Utilisation 'HTML'
------------------

<div class="header">
	<div class="dropdown" data-dropdown>
		<button class="link" data-dropdown-button>Un lien</button>
		<div class="dropdown-menu information-grid">
			<div>
				<div class="dropdown-heading">Choix items1</div>
				<div class="dropdown-links">
					<a href="#" class="link">Contenu-1</a>
					<a href="#" class="link">Contenu-2</a>
					<a href="#" class="link">Contenu-3</a>
				</div>  
			</div>
			<div>
				<div class="dropdown-heading">Choix items2</div>
				<div class="dropdown-links">
					<a href="#" class="link">Contenu-4</a>
					<a href="#" class="link">Contenu-5</a>
					<a href="#" class="link">Contenu-6</a>
				</div>  
			</div>
		</div>
	</div>
	<a href="#" clss="link">Autres</a>
	<div class="dropdown" data-dropdown>
		<button class="link" data-dropdown-button>Login</button>
		<div class="dropdown-menu">
			<form class="login-form">
				<label for="courriel">Courriel</label>
				<input type="email" name="courriel" id="courriel">
				<label for="motpasse">Mot de passe</label>
				<input type="password" name="motpasse" id="motpasse">
				<button type="submit">Login</button>
			</form>
		</div>
	</div>
</div>

 */