/** ===================================== */
/** Partie commune à l'ensemble du site   */
/** ===================================== */

/** === Fond de page === */
body {
	/* supression des marges */
	margin:					0;
	/* permet le mouvement correct du pied de page */
	position:				relative;
	min-height:				100vh;
	/* design du fond de page */
	background-image:		url("fond.png");
	background-repeat:		no-repeat;
	background-attachment:	fixed;
	background-size:		100% 100%;
	/* */
	font-family: 			"Futura", sans-serif;
}
/** === Haut et bas de page === */
header, footer {
	/* positionement sur toute la longueur */
	display:				block;
	/* avec aucun espace à gauche et droite */
	position:				absolute;
	left:					0;
	right:					0;
}
header {
	/* invisible */
	background:				none;
}
footer {
	/* fixé en bas de page */
	bottom:					0;
	display: inline-block;
}
/** === Logo du gem === */
header img.indexlogo {
	/* colle au bord gauche */
	float:					left;
	/* couleur du fond */
	background:				#407040;
	/* arrondis sur les bords sauf haut gauche */
	border-radius:			0 50% 50%;
}
/** === Style des parties globales du site  === */
footer, nav {
	/* fond vert */
	background:				#407040;
	/* texte blanc */
	color:					white;
	/* en gras */
	font-weight:			bold;
	/* espace autour des éléments */
	padding:				10px;
}

nav {
	margin-left: 90px;
}

/** === Élements de navigation === */
nav a {
	/* supprime le style lien hypertext */
	text-decoration:		none;
	text-align: left;
	color:					white;
	/* espacement entre les elements */
	padding:				0.2rem 1rem 0.2rem 1rem;
	margin:					0.1rem 0.6rem 0.1rem 0.6rem;
	display:				inline-block;
	border-radius:			25%;
}

nav ul {margin:					0;}
nav li {
	display:				inline;
	list-style:				none;
	border-radius:			25%;
	
}

/* === Élements de navigation survolé par la souris */
nav a:hover {
	color:					#407040;
	background:				whitesmoke;
}

/** === Élements de navigation administrateur */
nav a.admin_page {
	color:					#F08070;
	border-color:			darkred;
}

/** === droits d'auteur === */
footer p {
	float:					left;
	margin:					0rem;
	/* 5 pixels en haut le reste à zero */
	padding:				5px 0;
	display: inline-block;
}

/** === connexion administrateur === */
footer img {
	float:					right;
}
#loginpart {
	float:					right;
	display:				none;
}
#loginbutton {
	float:					right;
	display:				inline-block;
	background-color:		transparent;
}

/** === Contenu de page === */
main {
	/* marge à gauche et à droite et
	   compensation en haut et en bas des entetes et pieds de page */
	margin:					12rem 2% 4rem 2%;
	/* marge avant les paragraphes et le texte */
	padding:				3%;
	/* remplir l'ecrant en largeur */
	width:					90%;
	/* fond semi transparent */
	background-color:		#FFFFFFA0;
	/* adaptation au reste de la page */
	display:				inline-block;
}
/** ====================================== */
/** === Design par defaut des elements === */
/** ====================================== */

/** ========================================= */
/** =========== ÉLEMENTS COMMUNS ============ */
/** ========================================= */

/** Style des boutons */
button {
	padding:				5px;
	border:					none;
	background:				#609060;
	margin-left: 			20px;
	margin-right:			20px;
}

/** Style d'un bouton qui est survolé  */
button:hover {
	background:				lightgray;
}

/** Formulaires */
form {
	font:					bold;
	display:				inline-block;
	margin:					20px;
}

/** ====================================== */
/** =========== ÉLEMENT IMAGE ============ */
/** ====================================== */
a.contact-map img {
	width:					60%;
	height: 				20rem;
	outline:				solid 3px #407040;
	display:				inline-block;
	float:					right;
}


div.contact-infos {
	float:					left;
	padding-top:			10px;
	padding-bottom:			10px;
	display:				inline-block;
}

div.contact-infos p {
	padding-left:			3rem;
	padding-top:			0.5rem;
	padding-bottom:			0.5rem;
	background-size:		30px 30px;
	background-repeat:		no-repeat;
}

p.contact-tel {
	background-image:		url("tel.png");
}

p.contact-email {
	background-image:		url("email.png");
}

p.contact-loc {
	background-image:		url("loc.png");
}

div.contact-infos p img {
	margin-right:			1rem;
	margin-top:				0rem;
	padding-top:			0.5rem;
}



/** ================================================== */
/** ============= PAGE CALENDRIER ==================== */
/** ================================================== */

.planning {
	display: grid;
	grid-template-columns:	1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

span.month, span.year {
	display:				inline-block;
	text-align:				center;
}

span.month {
	width:					120px;
}

span.year {
	width:					60px;
}

div.title {
	color:					white;
	height:					35px;
	text-align:				center;
	padding-top:			15px;
	background:				#609060;
	font-weight:			bold;
}

div.planning-day, div.dayout, div.now {
	border:					2px solid #609060;
	min-height:				6rem;
	background-color:		#EEEEEE;
}

div.planning h2 {
	background-color: #C0E8C0;
}

#closeday {
	background-color: #C0E8C0;
}

div.dayout {
	background:				none;
	border:					none;
}

div.now {
	background:				#e0A083;
}

textarea {
	resize:					none;
	margin:					0px;
	padding:				0px;
	height:					50px;
	width:					93%;
	float:					left;
	display:				inline;
}

input {
	width:					6rem;
}

h1 {
	font-size:				1.2rem;
}

h2 {
	font-size:				1rem;
	margin:					0;
	padding:				0.15rem;
}

div p {
	margin:					0px;
}

p.showday {
	display:	inline-block;
}



p {display: block;}

div.small-screen {
	display: none;
}

/** === Élements de navigation réseaux sociaux === */
nav a.sites {
	background-image:		url("facebook.svg");
	background-repeat:		no-repeat;
	background-attachment:	relative;
	background-size:		contain;
	padding: 1rem 0rem 0.5rem 1.4rem;
	float: right;
}

nav a.siteposition {
	background-image:		url("position.png");
	background-repeat:		no-repeat;
	background-attachment:	relative;
	background-size:		contain;
	padding: 1rem 0rem 0.5rem 1.4rem;
	float: right;
}

nav a.sitescontact {
	background-image:		url("contact.png");
	background-repeat:		no-repeat;
	background-attachment:	relative;
	background-size:		contain;
	padding: 1rem 0rem 0.5rem 1.4rem;
	float: right;
}

nav a.siteposition:hover, nav a.sites:hover, nav a.sitescontact:hover {
	outline: solid 2px white;
	background-color: #00000000;
}

div.contact-infos {
  display: block;
  width: 46%;
	margin-left: 1rem;
}

iframe {
	float: right;
	height: 20rem;
	margin: 1rem;
	width: 46%;
	display: inline-block;
}

/** Adaptation aux petits ecrants */
@media screen and (max-width:50rem) {
	/* planning */
	div.planning, div.small-screen {
		display: inline;
	}
	div.title {display: none;}
	
	/* formulaire de contact */
	a.contact-map {
		height: 18rem;
		width: 20rem;
		width: 100%;
	}
	a.contact-map img {
		width: 100%;
		height: auto;
		display: block;
	}
	
	div.contact-infos {
    width: 94%;
  }
	
	iframe {
		width: 94%;
	}
}
/** CORRECTIF ACCESSIBLITÉ */
header img.indexlogo, nav, footer {
	background: #205020;
	color: white;
	font-weight: bold;
}

button {
	background: #205020;
	color: white;
	font-weight: bold;
}

button:hover {
	color: black;
}

div.title {
	background: #306530;
}

div.planning-day {
	border-color: #306530;
}