*{box-sizing:border-box; -ms-overflow-style: none; scrollbar-width: none;
  scroll-behavior: smooth;}
*::-webkit-scrollbar {display: none;}

html, body
{
	padding: 0;
	margin: 0;
	min-height: 100dvh;
}

@media (max-width: 768px)
{
	html, body
	{
		
		width: 100dvw;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
}

body
{
	&
	{
		background: var(--couleurClaire1);
		
		color:var(--couleurText);
		font-family: var(--fontBody);
		font-size: 1.4rem;
		
	}
	
	.btn
	{
		color: var(--couleurBTNTxt);
		background: var(--couleurBTN);
		border-radius: var(--borderRadiusXS);
		padding: 10px 20px;
		text-decoration: none;
		margin: 10px 0;
		display: inline-flex;
		gap: .5em;
		transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
		transform: scale(1);	
		font-weight: 100;
		align-items: center;	
	}
	
	#menu-principal
	{
		ul, li{ margin: 0; padding: 0}
		ul{
			display: flex; 
			gap: .5em;
			align-items: center;
		}
		li{
			list-style: none;
		}
	}
	
	.btn:hover{
		transform: scale(1.01);
	}
	
	.btn i{
		line-height: 30px;
	}
	
	a{
		color: #887344;
		font-weight: bold;
	}
	
	#corps{
		background: var(--couleurClaire1);
		border-radius: var(--borderRadius);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		position: relative;
		z-index: 1
						
	}
	
}

.balise
{
	&{
		background: var(--couleurBaliseFond);
		color: var(--couleurBaliseTxt);
		padding: 5px 30px;
		border-radius: var(--borderRadiusS);
		width: fit-content;
		font-size: .8em;
		position: relative;
		padding-right: 20px;
		margin-bottom: 20px
	}
	
	&:before
	{
		content: " ";
		aspect-ratio: 1/1;
		width: 10px;
		background: var(--couleurBaliseTxt);
		border-radius: 50%;
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
}

header
{
	&
	{
		width: var(--maxWidth);
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	nav
	{
		&
		{
			display: flex;
			gap: 1em;
			align-items: center;
		}
		
		@media (max-width: 768px)
		{
			&{
				display: none;
			}
			
		}
		
		a{
			color: var(--couleurText); 
			text-decoration: none; 
			font-family: var(--fontBody); 
			font-weight: 100;
			font-size: .8em;
			padding: 10px 10px;
			border-radius: var(--borderRadius);
		}
		
		a:hover{
			background: var(--couleur1);
			color: white;
		}
		
		.btn{
			margin: 10px 0;
			align-items: center;
		}
	}	
}