@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Josefin", sans-serif;
}

.container{
	max-width: 1000px;
	margin: auto;
}

/*DEBUT FLECHE SCROLL*/

.scroll-haut{
		position: fixed;
		bottom: 20px;
		right: 20px;
		background: url(images/arrow.jpg) no-repeat;
		width: 50px;
		height: 50px;
		opacity: 0.3;
		
/*animation fade doit être avant animation timeline*/
		animation: fade;
		animation-timeline: scroll(y root);
}

@keyframes fade{
	0%{opacity:0;}
	25%{opacity: 1;}
}

/*FIN FLECHE SCROLL*/

/*DEBUT MENU BURGER*/
#burger{
	position: absolute;
	width: 100%;
	font-size: 20px;
	right: 0;
	top: 0;
	display: none;
}

#burger .nav{
	background: rgb(21, 159, 153);
	width: 100%;
	text-align: center;
	padding: 20px 0;
	transition: transform 1s;
}

#open, #close{
	position: absolute;
	height: 44px;
	font-size: 50px;
	right: 10px;
	top: 10px;
	z-index: 1;
}

#burger a{
	text-decoration: none;
	display: block;
	padding: 10px;
}

/*fait disparaître ou apparaître le bouton*/

#burger:target #open, #burger:not(:target) #close{
	display: none;
}

#burger:not(:target) .nav{
/*	translate: x, y, z;*/
	transform: translate3d(0, -240px, 0);
}

#burger:target .nav{
/*	translate: x, y, z;*/
	transform: translate3d(0, 0, 0);
}

/*FIN MENU BURGER*/

header{
	margin-top: 20px;
}

.centre{
	margin: auto;
	text-align: center;
}

.container img{
	text-align: center;
	margin-bottom: 15px;
}

nav{
	background-color: rgb(21, 159, 153);
	display: flex;
	justify-content: space-around;
}

nav a{
/*	text-decoration: none;*/
	color: white;
	padding: 15px;
	text-decoration: underline solid 2px;
	text-decoration-color: rgb(21, 159, 153);
	text-underline-offset: 7px;
	transition-duration: 2s;
}

nav a:hover, .menu-actif{
	text-decoration: underline solid 2px rgb(43, 58, 63);
	text-underline-offset: 7px;
}

#banniere{
	height: 100vh;
	background: url(images/bandeau.jpg) center/cover;
}

#presentation {
	background-color: rgb(43, 58, 63);
	color: white;
	padding: 60px 0;
	text-align: center;
}

h1{
	text-align: center;
	font-size: 22px;
	padding-bottom: 15px;
	text-transform: uppercase;
	margin: 25px 0 5px 0;
	font-weight: 100;
}

hr{
	width: 25%;
	margin: auto;
	border: 2px solid rgba(0, 205, 196, 1);
}

#presentation p{
	margin: 20px 0;
}

#presentation strong{
	color: rgba(0, 205, 196, 1);
}

.bouton{
	background-color: rgba(0, 205, 196, 1);
	padding: 6px 40px;
	border-radius: 5px;
}

#services .container{
	display: flex;
	justify-content: space-between;
	gap: 30px;
	margin-top: 30px;
	max-height: 100vh;
}

.col{
	width: 330px;
	text-align: center;
}

.col-img{
	height: 200px;
	width: 200px;
	margin: 15px auto;
}

.img1{
	background: url(images/img1.png) center/cover no-repeat;
}

.img2{
	background: url(images/img2.png) center/cover no-repeat;
}

.img3{
	background: url(images/img3.png) center/cover no-repeat;
}

.texte-service{
	text-transform: uppercase;
	background-color: rgb(21, 159, 153);
	padding: 15px;
	margin-bottom: 15px;
	color: white;
	text-align: center;
}

#services{
	height: 700px;
}

#services p{
	text-align: center;
}

#honoraires{
	background-color: rgb(43, 58, 63);
	color: white;
}

#honoraires .container{
	padding: 30px 0;
}

#honoraires-texte{
	text-align: center;
	margin-top: 20px;
}

.honoraires-spe{
	background-color: rgb(21, 159, 153);
	padding: 15px 0;
}

#transaction-grid{
	display: grid;
	grid-template-columns: 4fr 1fr 4fr;
	grid-template-rows: 1fr 1fr 1fr;
	justify-content: center;
	row-gap: 10px;
}

.honoraires-left{
	justify-content: flex-end;
	text-align: right;
}

.honoraires-right{
	text-align: left;
}

.honoraires-spe hr{
	width: 15%;
}

.honoraires-spe {
	margin-bottom: 20px;
}

#gestion-grid{
	display: grid;
	grid-template-columns: 4fr 1fr 4fr;
	grid-template-rows: 1fr 1fr;
	justify-content: center;
	row-gap: 10px;
}

#location-grid{
	display: grid;
	grid-template-columns: 4fr 1fr 4fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	justify-content: center;
	row-gap: 10px;
}

#honoraires-italique{
	text-align: center;
	margin: 30px 0;
}

#contact-hr{
	width: 10%;
}

#contact img{
	width: 50px;
}

#contact-grid{
	display: grid;
	grid-template-columns: 50px 150px;
	grid-template-rows: 50px 50px;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.contact-flex{
	display: flex;
	align-items: center;
}

footer{
	background-color: rgb(21, 159, 153);
	margin-top: 30px;
}

footer .container img{
	margin: 0;
}

#logos img{
	width: 25px;
	height: 25px;
}

#logos{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 10px;
}

#logos a{
	padding: 20px 0;
}




@media screen and (max-width: 1000px){
		.container{
			width: 100%;
			padding: 0 20px;
		}

		header nav{
			display: none;
		}

		#burger{
			display: block;
		}

		#burger nav .menu-actif{
			text-decoration: underline solid 2px rgb(43, 58, 63);
			text-underline-offset: 8px;
		}

		nav a:hover, .menu-actif {
    		border-bottom: none;
    	}

		nav{
			flex-direction: column;
		}

		.centre img{
			width: 50%;
		}

		#banniere{
			width: 100%;
		}

		#presentation{
			width: 100%;
		}

		#services{
			height: 1500px;
		}

		#services .container{
			flex-direction: column;
		}

		.col{
			width: 100%;
		}
}