* { margin: 0; padding: 0; }
body {
    background: url("../contenu/arbres.png") repeat-x bottom fixed, linear-gradient(#000214,#376a94) fixed;
    color: #c1fdf8;
    font-family: Arial;
    margin: 0;
}

#entete {
    width: 75%; min-width: 300px; /* related to page size and paddings */
    margin: auto;
    height: 145px;
    display: grid;
    place-content: center;
}
#entete .banniere {
	width: 637px;
	height: 120px;
}
#corps {
	width: 75%; min-width: 280px; /* related to page size and paddings */
	min-height: 100vh;
	margin: auto;
	padding: 20px 30px;
	background-color: #ffffff0e;
	font-size: 120%;
    border-radius: 30px;
}
#pdp {
    width: 75%; min-width: 300px; /* related to page size and paddings */
    margin: auto;
    padding: 10px 0 5px 0;
    color: white;
    text-align: center;
    font-size: 80%;
}

a { text-decoration: none; color: #6d93fd; font-style: italic; }
a img { border:none; }
a:hover { text-decoration: underline; }
h1 { margin: 10px 0; font-size: 140%; text-align: center; }
.center { text-align: center; }
div.error { color: red; background-color: white; border-radius: 5px; display: inline-block; padding: 20px 60px 20px 20px; margin: 20px 0; }
div.error ul { position: relative; left: 40px; }
.obligatoire { color: red; font-size: bolder; }

/***************************MENU***************************/
#menu {
    width: 100%;
	height: 44px;
    line-height: 44px;
    margin-bottom: 20px;
	background-color: #ffffff10;
    border-radius: 20px;
	text-align: center;
	font-size: 140%;
    display: inline-flex;
}
#menu div { display: inline-flex; flex: 1; width: 100%; margin: 0 16px; }
#menu a { flex: 1; text-decoration: none; font-style: normal; }
#menu a:hover, #menu a.active { background: #ffffff0e; color: #000214; }

/***************************Accueil***************************/
div.concerts {
    position:relative;
    float: right;
    width: 33%;
    border-radius: 5px;
    background-color: #000214e0;
    color: #e2e2e2;
}
div.concerts div.titre { font-size: 150%; text-align: center; padding: 25px 0 15px 0; }
div.concerts div.concert { margin: 20px; }
div.concerts span.important { font-weight: bold; }
div.concerts a { padding: 10px 0; line-height: 40px; }

div.article {
    width: 65%;
    border-radius: 5px;
    background-color: #000214e0;
    color: #e2e2e2;
    margin: 15px 0;
}
div.article div.titre { font-size: 150%; padding: 15px; }
div.article div.texte { padding: 0 15px 15px 15px; line-height: 30px; }

/***************************Groupe***************************/
#groupe { text-align: center; }
#groupe p { text-align: justify; margin: 15px 0;}
#groupe img.groupe { width: 80%; box-shadow: 0 0 7px black; margin: 15px 0; }
#groupe img.membre { width: 16%; box-shadow: 0 0 7px black; margin: 15px 10px; cursor: pointer; }
div.popupContent {
    width: 75%;
    min-width: 255px; /* related to page size and paddings */
    height: 100%;
    margin: auto;
    overflow: auto;
    color: white;
    font-size: 140%;
    display: none;
    padding: 0 15px;
}
div.popupContent p.titre { text-align: center; font-size: 140%; margin: 30px 0; }
div.popupContent p.texte { text-align: justify; }
div.popupContent img.photoPopup { position:relative; float: right; margin: 0 0 10px 20px; }

/***************************Contact***************************/
input[type="submit"], button {
    padding: 10px 20px;
    margin: 30px 0 0 0;
    font-size: 100%;
    background-color: #000214;
    color: #e4e4e4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
input[type="text"], textarea, select {
    padding: 5px;
    margin: 5px 0 0 0;
    font-size: 100%;
    font-family: Arial;
    border-radius: 5px;
}
input.formElementSize, select.formElementSize { max-width: 760px; width: 95%; }
textarea.formElementSize { max-width: 760px; width: 95%; height: 200px; }