@charset "utf-8";
/* CSS document */

@import url('https://fonts.googleapis.com/css?family=Hind+Siliguri:300,400,500,600,700&display=swap');

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Hind Siliguri', sans-serif;
}

/* header */

hr {
	display:none;
	border:.25vh solid #748da6;
	background-color: #748da6;
	margin:1% auto 3% auto;
}

header {
	display: flex;
	justify-content: space-between;
	margin-bottom: .5%;
	padding: .75%;
}

header img {
	max-width: 470px;
}

/* main */

main {
	text-align: center;
}

section {
	margin-bottom: 2%;
}

section h1 {
	font-size: 3vw;
	font-weight: 500;
	position:absolute;
	margin-top: -18.5%;
	margin-left: 32.5%;
	background: rgba(255,255,255,.5);
	padding: .15% 1%;
}

#pietonsmart {
	display: none;
}

article h2 {
	font-weight: 400;
	font-size: 2.25em;
	margin-bottom: 1%;
}

article p {
	color:#748da6;
	font-size: 1.5em;
	padding:0% 5%;
	text-align: justify;
}

/* boutons dans le main */

#boutons {
	display: flex;
	justify-content: center;
	margin:3% auto 2% auto;
}

#boutons a {
	text-decoration: none;
	color: white;
	font-weight: 600;
	font-size: 1.25em;
}

.adhesion {
	background-color: #ff9933;	
	padding: .5% 1%;
}

.gestion {
	background-color: #748da6;
	padding: .5% 1%;
}

.adhesion:hover {
	background-color: #748da6;
}

.gestion:hover {
	background-color: #ff9933;
}

#boutons a:hover {
	color:black;
}

/* footer */

footer {
	display: flex;
	justify-content: space-between;
	padding: 1.5%;
}

footer a {
	color:black;
}

footer a:hover {
	color:#ff9933;
}

#adresse {
	display: flex;
	font-size: .85vw;
}

#basdroit {
	display: flex;
	justify-content: space-between;
	width: 20%;
	margin-right: 5%;
}

#basdroit a {
	font-size: .85vw;
}

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

	/* header */

	hr {
		display:block;
	}

	/* main */

	#pietondesk {
		display:none;
	}

	#pietonsmart {
		display: inline;
		width: 100%;
	}

	section h1 {
		width:65%;
		font-size: 5vh;
		margin-top: -75%;
		margin-left: 16%;
	}

	/* boutons dans le main */

	#boutons {
		flex-direction: column;
		margin:5% auto;
		align-items: center;
	}

	#boutons a {
		font-size: 5vw;
		padding: 2%;
	}

	.adhesion {
		background-color: #ff9933;	
		padding: 1%;
		width: 35%;
	}

	.gestion {
		background-color: #748da6;
		padding: 1%;
		width: 45%;
		margin-top: 5%;
	}

	.adhesion:hover {
		background-color: #ff9933;
	}

	.gestion:hover {
		background-color: #748da6;
	}

	#boutons a:hover {
		color:white;
	}

	/* footer */

	footer {
		flex-direction: column;
		padding: 1.5%;
		text-align: center;
	}

	footer a:hover {
		color:black;
	}

	#adresse {
		flex-direction: column;
		font-size: 6vw;
		margin:2% auto;
		padding:1%;	
	}

	.tiret {
		display: none;
	}

	#basdroit {
		width: 95%;
		text-align: center;
		margin: 2% auto;
	}

	#basdroit a {
		font-size: 4vw;
	}

}