:root{
	--gilroy: Gilroy;
	--justlovely: JustLovely;
	--bleu:#00385e;
	--framboise:#ff3859;
	--vert:#33eab5;
	--soleil:#ffd154;
}


header{
	height: 150px;
}


/*--------------<nav> et container--------------*/
.navbar{
	height: 150px;
	background-color: white;
	box-shadow: 0 10px 10px rgba(200,200,200,0.2);
	padding: 0 35px;
}

.container-fluid{
	max-width: 1600px;
	margin: 0 auto;
	background-color: white;
}



/*--------------Logo--------------*/
.logo-header{
	width: 300px;
}



/*--------------<div> de <ul>--------------*/
#navbarText{
	padding-left: 20px;
}



/*--------------<ul> de la nav--------------*/
.navbar-nav{
	column-gap: 30px;
	padding-right: 30px;
	padding-left: 30px;
}



/*------------<li> de la nav--------------*/
.nav-item{
	font-family: var(--gilroy);
	font-weight: 600;
	font-size: 18px;
	background-color: white;
}



/*-----------<a> des <li>------------*/
#achat-residentiel-nav,#investissement-locatif-nav{
	color: var(--bleu);
	width: max-content;
}


#achat-residentiel-nav:hover,#investissement-locatif-nav:hover{
	color: var(--framboise);
}


#contact-nav{
	background-color: var(--framboise);
	padding: 10px 20px;
	border-radius: 5px;
	color: white;
	font-size: 16px;

	filter: brightness(1);
	transition: filter 0.2s ease-in-out;

	width: max-content;
}


#contact-nav:hover{
	filter: brightness(0.9);
}






/*---------Bouton---------*/
.navbar-toggler{
	width: 32px;
	height: 20px;
	position: relative;
	transition: all .5s ease-in-out;
}


.navbar-light .navbar-toggler{
	border:1px solid transparent!important;
	color: transparent!important;
}


.navbar-toggler,.navbar-toggler:focus,.navbar-toggler:active,.navbar-toggler-icon:focus {
	outline: none;
	box-shadow: none;
	border:0;
}


.toggler-icon{
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: var(--bleu);
	border-radius: 20px;
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
}


.middle-bar{
	margin-top: 0;
}


/*Quand l'icone est cliqué*/
.navbar-toggler .top-bar{
	margin-top: 0;
	transform: rotate(135deg);
}


.navbar-toggler .middle-bar{
	opacity: 0;
}


.navbar-toggler .bottom-bar{
	margin-top: 0px;
	transform: rotate(-135deg);
}


/*Etat quand la navbar est collapsed*/
.navbar-toggler.collapsed .top-bar{
	margin-top: -20px;
	transform: rotate(0deg);
	filter: alpha(opacity=0);
}


.navbar-toggler.collapsed .middle-bar {
	opacity: 1;
	filter: alpha(opacity=100);
}


.navbar-toggler.collapsed .bottom-bar{
 margin-top: 20px;
 transform: rotate(0deg);
}




/*---------Responsive----------*/
@media screen and (max-width: 1100px) {
	.logo-header{
		width: 250px;
	}
}


@media screen and (max-width: 560px) {
	#contact-nav{
		font-size: 14px;
	}
}



@media screen and (max-width: 420px) {
	.logo-header{
		width: 200px;
	}
}



/******************FOOTER****************/
footer{
	background-color: var(--bleu);
	margin-top: 130px;
	padding: 50px;
}


.wrapper-footer{
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	row-gap: 50px;
	align-items: center;
}


.logo-footer,.immodvisor{
	display: block;
	margin: 0 auto;
	width: 250px;
}


.conteneur-social-media a > i{
	font-size: 30px;
	color: white;
	margin-right: 50px;
}


.fa-instagram{
	margin-right: 0!important;
}


.immodvisor{
	width: 150px;
}


footer a{
	color: white;
}


.mentions-legales{
	margin-bottom: 100px;
}


/*Responsive*/
@media screen and (max-width: 750px) {
	.logo-footer{
		width: 200px;
	}

	.conteneur-social-media a > i{
		font-size: 20px;
	}

	.immodvisor{
		width: 100px;
	}

	.mentions-legales{
		margin-bottom: 80px;
	}
}



@media screen and (max-width: 450px) {
	.conteneur-social-media a > i{
		margin-right: 30px;
	}
}