* {margin:0; padding:0; font-size:1em; box-sizing:border-box;}
a img {border:0;}
/* Cible n'importe quel élément <a> lorsque  */
/* celui-ci est survolé */
a:hover {font-weight: bold;}


body {font-family: Verdana, FreeSans, Helvetica, sans-serif; font-weight:300;flex-wrap: wrap;text-align:center;}


/* Header */
header {height: 20%; width:90%; display: flex; flex-direction: column; margin: auto;  /*border: 1px solid black;*/}
#Banniere {display: flex; flex-direction: row; width: 100%; /*border: 1px solid red;*/}
#Banniere img {width: 10%; width: 150px; height: 150px; /*border: 5px solid blue;*/}
#Banniere div {text-align: center; width: 90%; margin: auto; /*border: 5px solid red;*/}
#Banniere h1 {font-size: 4em;}
#Banniere q {font-size: 2em; font-style: italic;}
#Banniere p {font-size: 2em;}
#Page {font-size: 3em; padding-top: 1em; padding-bottom: 1em;}
#Menus {width:100%; display: flex; flex-direction: row; justify-content: space-around; margin-top: 1.5em; margin-bottom: 1.5em; /*border: 1px solid blue;*/}

/* Article */
article {width:90%; text-align:center; display: flex; flex-direction: row; margin: auto; justify-content: space-around; /*border: 5px solid violet;*/}
.kandji {width: 20%;}

.corps {width: 60%; text-align: justify; padding-left: 10%; padding-right: 10%; margin: auto;}
.corps h1 {font-size: 4em; padding-top: 1em; padding-bottom: 1em; text-align: center;}
.corps figcaption {text-align:center;}

.corps2 {width: 60%; text-align: center; padding-left: 10%; padding-right: 10%;}
.corps2 img {max-width: 100%;}
.corps2 h1 {padding-top: 3em;font-size: 2em;}

.corps3 {width: 100%; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 2em; padding-bottom: 2em;}
.corps3 * {padding-top: 0.5em; padding-bottom: 0.5em;}
.corps3 div {text-align: left; padding: 0%; margin: auto; justify-content: space-around;}

.corps4 {width: 80%; padding-left: 10%; padding-right: 10%; padding-top: 2em; padding-bottom: 2em;}
.corps4 p {text-align: justify; margin-top: 1em; margin-bottom: 1.5em;}
.corps4 q {font-style: italic; color: red; font-size: 1em; font-weight: bold; text-align: center;}
.corps4 div {font-style: italic; color: red; font-size: 1em; font-weight: bold; text-align: center;}

.enseignant  {width: 30%; padding-top: 2em; padding-bottom: 2em; }
.enseignant p{width: 80%; margin: auto; text-align: justify; }

.liens {margin: auto; width: 50%; padding-top: 2em; padding-bottom: 2em; /*border: 1px solid violet;*/}
.liens img {padding-top: 2em; padding-bottom: 2em; /*border: 1px solid violet;*/}
.liens iframe {width: 100%; min-height: 500px;}

.ligne {display: flex; flex-direction: row; justify-content: space-around; margin: auto; padding-top: 1em; padding-bottom: 1em; }
.lignes {display: flex; flex-direction: row;}
.horaires {width: 50%; justify-content: space-around; margin: auto;}
.jour {text-align: center; margin: auto; /*border: 1px solid blue;*/ width: 50%;}
.carte {width: 50%; justify-content: space-around; /*margin: auto;*/ padding-top: 1em;}

table {table-layout: auto; width: 80%; border-collapse: collapse; border-spacing: 0px; margin: auto;}
th, td {border: 1px solid black; padding: 1em; }
tr:nth-child(1) td:nth-child(1){border-top: 0px; border-left: 0px;}
#soustableau {font-size: 0.75em;}

.vertical {width:60%; display: flex; flex-direction: column; margin: auto; }
.Raccourcis {text-align:center; display: flex; flex-direction: row; justify-content: space-around;padding-top: 1em; padding-bottom: 1em;}
.Raccourcis div  {width: 30%;}
.Raccourcis a {background-color: gold; /*border: 1px solid black;*/}

/* Footer */
footer {height: 10%; width:90%; display: flex; flex-direction: column; margin: auto; padding-top: 2em;/* border: 1px solid blue;*/}
#Pied {width:100%; display: flex; flex-direction: row; justify-content: space-around; /*border: 1px solid blue;*/}
#Pied div {display: flex; flex-direction: column; width: 50%; /*border: 1px solid violet;*/}
#Copyright {font-size: 0.8em; /*border: 1px solid red;*/}


/* Responsive design */
@media (max-width:768px) {
		body {font-family: Verdana, FreeSans, Helvetica, sans-serif; font-weight:300;flex-wrap: wrap;text-align:center;}


		/* Header */
		header {height: 20%; width:90%; display: flex; flex-direction: column; margin: auto;  /*border: 1px solid black;*/}
		#Banniere {display: flex; flex-direction: row; width: 100%; /*border: 1px solid red;*/}
		#Banniere img {width: 10%; width: 150px; height: 150px; /*border: 5px solid blue;*/}
		#Banniere div {text-align: center; width: 90%; margin: auto; /*border: 5px solid red;*/}
		#Banniere h1 {font-size: 2em;}
		#Banniere q {font-size: 1.5rem; font-style: italic;}
		#Banniere p {font-size: 1em;}
		#Page {font-size: 3em; padding-top: 1em; padding-bottom: 1em;}
		#Menus {width:100%; display: flex; flex-direction: row; justify-content: space-around; margin-top: 1.5em; margin-bottom: 1.5em; /*border: 1px solid blue;*/}

		/* Article */
		article {width:90%; text-align:center; display: flex; flex-direction: row; margin: auto; justify-content: space-around; /*border: 5px solid violet;*/}
		.kandji {display: none;}

		.corps {width: 100%; text-align: justify; padding-left: 5%; padding-right: 5%; margin: auto;}
		.corps figcaption {text-align:center;}

		.corps2 {width: 100%; text-align: center; padding-left: 5%; padding-right: 5%;}
		.corps2 img {max-width: 100%;}
		.corps2 h1 {padding-top: 3em;}

		.corps3 {width: 100%; text-align: center; padding-left: 5%; padding-right: 5%; padding-top: 2em; padding-bottom: 2em;}
		.corps3 * {padding-top: 0.5em; padding-bottom: 0.5em;}
		.corps3 div {text-align: left; padding: 0%; margin: auto; justify-content: space-around;}
		.corps3 img {width: 90%;}

		.corps4 {width: 100%; padding-left: 5%; padding-right: 5%; padding-top: 2em; padding-bottom: 2em;}
		.corps4 p {text-align: justify; margin-top: 1em; margin-bottom: 1.5em;}
		.corps4 q {font-style: italic; color: red; font-size: 1em; font-weight: bold; text-align: center;}
		.corps4 div {font-style: italic; color: red; font-size: 1em; font-weight: bold; text-align: center;}

		.vert {flex-direction: column;}
		.enseignant  {width: 100%; padding-top: 2em; padding-bottom: 2em; }
		.enseignant p{width: 100%; margin: auto; text-align: justify; }

		.liens {margin: auto; width: 50%; padding-top: 2em; padding-bottom: 2em; /*border: 1px solid violet;*/}
		.liens img {width: 100%;}
		.liens iframe {width: 100%; min-height: 500px;}

		.ligne {display: flex; flex-direction: row; justify-content: space-around; margin: auto; padding-top: 1em; padding-bottom: 1em; }
		.lignes {display: flex; flex-direction: row;}
		.horaires {width: 50%; justify-content: space-around; margin: auto;}
		.jour {text-align: center; margin: auto; /*border: 1px solid blue;*/ width: 50%;}
		.carte {width: 50%; justify-content: space-around; /*margin: auto;*/ padding-top: 1em;}
		.carte iframe {width: 100%;}

		table {table-layout: auto; width: 80%; border-collapse: collapse; border-spacing: 0px; margin: auto;}
		th, td {border: 1px solid black; padding: 1em; }
		tr:nth-child(1) td:nth-child(1){border-top: 0px; border-left: 0px;}
		#soustableau {font-size: 0.75em;}

		.vertical {width:100%; display: flex; flex-direction: column; margin: auto; }
		.Raccourcis {text-align:center; display: flex; flex-direction: row; justify-content: space-around;padding-top: 1em; padding-bottom: 1em;}
		.Raccourcis div  {width: 30%;}
		.Raccourcis a {background-color: gold; /*border: 1px solid black;*/}

		/* Footer */
		footer {height: 10%; width:90%; display: flex; flex-direction: column; margin: auto; padding-top: 2em;/* border: 1px solid blue;*/}
		#Pied {width:100%; display: flex; flex-direction: row; justify-content: space-around; /*border: 1px solid blue;*/}
		#Pied div {display: flex; flex-direction: column; width: 50%; /*border: 1px solid violet;*/}
		#Copyright {font-size: 0.8em; /*border: 1px solid red;*/}
}




}