@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
	  font-weight: 400;
	  scroll-behavior:smooth; }

@keyframes fade {
	from {opacity:0;}
	to { opacity:1;}
}
.scroll-haut {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 60px;
	color:#31a29b;
	animation:fade;
	animation-timeline: scroll(y root);
	
	

}


	  /*----------------------------------------------------MENU BURGER */

#burger {

	position: absolute;
	width: 100%;
	font-size: 20px;
	right: 0;
	top: 0;
	display: none;


}

#burger nav {
	position: absolute;
	width: 100%;
	text-align: center;
	background-color: white;
	transition: transform 1s;
}

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

#open, #close {

	position: absolute;
	right: 10px;
	font-size: 50px;
	z-index: 1;

}

/*Faire disparaitre le bouton*/

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

#burger:not(:target) nav{
	transform: translate3d(0, -200px, 0);
}

#burger:target nav{
	transform: translate3d(0, 0, 0);
}
/*----------------------------------------------------------------------------FIN MENU BURGER*/
.contenu {
			width: 1000px;
			margin: auto;
			color: white;
			padding: 20px;
			text-align: center;
			}



.nomarge {

		padding: 0;
}

p {
		margin-top: 15px;
}
header {
			text-align: center;

}
header nav a {

			text-decoration: none;
			font-size: 15px;
			color: white;
			height: 30px;
			display: flex;
			align-items: center;
			transition:0,8s ;

		
			}

nav a:hover {

/*	text-decoration: underline;*/
	border-bottom: 3px solid black;

}

header img { 
		
		padding: 15px;

		}
header nav { 
			margin-top:40px;
			width:100%;
			background: #31a29b;
			display: flex;
			justify-content: space-around;
			padding: 20px;

		}
#banniere {
			width: 100%;
			height: 600px;
			background: url(images/bandeau.jpg);
			background-size: cover;
			background-position: center;
			margin-bottom: 0;
		}

h2 {
			color: white;
			font-size: 30px;
			text-align: center;
			margin: 20px 0 20px 0;
			font-weight: semibold;
		}

h3 {
			color: black;
			font-size: 30px;
			text-align: center;
			margin: 20px 20px;
			font-weight: semibold;
		}

h4 {
			background: #31a29b;
			color: white;
			

}

.fondvert {

			background: #2d4e51;
			padding-bottom: 40px;
			
			
			
		}

hr {
			width: 400px;
			height: 5px;
			background: #31a29b;
			margin: auto;
			border: none;


		}

.bouton {

	text-decoration: none;
	color: white;
	border: none;
	padding: 10px;
	display:block;
	width: 300px;
	text-align: center;
	margin: auto;
	margin top: 20px;
	background: #31a29b;

}

.col {
	display:flex;
	justify-content: space-between;
	width: 1000px;
	margin: auto;
	

}



.col-img {
	width: 30%;
	height: 30%px;
	margin-bottom: 20px;
	margin-top: 30px;
	text-align: center;
}



.tiret {
	text-align: center;
	width: 20px;
}

.tableau { 
	display: flex;
	justify-content: space-between;

	
}

.col1 {
	text-align: right;
	font-size: 15px;
	width: 48%;
}

.col2 {

	text-align: left;
	font-size: 15px;
	width: 48%;
}



.picto { 
		
		display: flex;
		gap:20px;
		align-items: center}
	

		


.numero {
	width: 50%;
	color: black;
}


a {
	text-decoration: none;
	color: black;

}

.tel {
	width: 45%;
	text-align: right;
}

.num {
	width: 55%;

}

.tel a {
	width: 55%;
}

.contactez {
	margin-top: 40px;
	margin-bottom: 40px;
}

#baniere {
	background:#31a29b ;
	height: 40px;
	margin-bottom:0;
	display: flex;
	justify-content: center;
	align-content: center;
}

.reseau {
	text-align: center;
	align-content: center;

}





/*-----------------------------------RESPONSIVE-----------------------------------------*/

@media screen and (max-width: 1000px) {

    .contenu {
        width: 100%;
        

    }

    header nav {
      display: none;
	}

	header img {
		width: 60%;
	}
    #banniere {
        height: 200px;
    }

    h2, h3 {
        font-size: 24px;
    }

    hr {
        width: 80%;
    }

    .bouton {
        width: 80%;
    }

    .col {
        flex-direction: column;
        width: 100%;
    }

    .col-img {
        width: 80%;
        margin: 20px auto;
    }

    .tableau {
        flex-direction: column;
        align-items: center;
    }

    .col1, .col2 {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

   

	.tel, .num{

		width:auto;
	}




	.contactez { 
		display: flex;
		align-content: center;
		flex-direction: column;
	
	}

	.picto {
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;


	}



	#burger { 
	display:block; }

	}