html{
	/* Variables couleurs*/
	--color0: #AB3230; /*rouge sang*/
	--color1: #2198A1; /*bleu foncé*/
	--color2: #B67B17; /*jaune sable ocre*/

  background-color: black;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Mono',  Arial, Helvetica, sans-serif;
  font-size : 16px;
  color: white;
  /*margin-left: 10%;
  margin-right: 10%;*/
}
/************** main ***************/
main{
  margin-left: 10%;
  margin-right: 10%;

}

/* Style the header */
.header {
  color: white;
  background-color: #262626; /*#f1f1f1*/
  padding: 30px;
  text-align: center;
  font-size: 30px;
}



.header .box_logo_page img{
  width: 25%;
}

#titre_page{
  size: 75%;
}

/**************************** barre de navigation ************************************/
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover, .dropdown:hover .dropbtn {
  background-color: var(--color0);
}

nav li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: var(--color0);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*****************************************/


/******************* contenu des pages ***************************************/
/*  https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
.contenu{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap; /*met à la ligne les boites quand, mise bout à bout, elles dépassent la largeur de la fenêtre */
    justify-content: center;
    /*align-items: flex-start;*/
	color:white;
  /*margin-left: 10%;
  margin-right: 10%;*/
}
.boiteDeContenu {
	border-radius: 15px;
	padding: 12px;
	margin: 20px 10px 10px 10px;
	background-color: var(--color0);
	border: 1px solid var(--color1);
	max-width: 33%;
	
	width: 250px;
	/*box-shadow: 7px 7px 8px #888888;*/
	transition: width 0.5s, height 1s; 
  /*text en noir ...*/
  color: black;
	
}
.boiteDeContenu:hover{
	/*width:260px;*/
  box-shadow: 7px 7px 8px #888888;
  background-color: #D08A89;
	
}

.boiteDeContenu a {
	text-decoration : none;
	color:black;
}
.boiteDeContenu p a:hover{
  text-decoration : none;
  color:black;
  font-style: italic;
}
.boiteDeContenu p { /* pour éviter que les mots trop long ne dépasse de la div BoiteDeContenu */
    overflow-wrap: break-word;
}

.boiteDeContenu img {
	width:100%;
}
.boiteDeContenu h1 {
	border-radius: 5px;
	background-color: var(--color2);
	margin-top:-20px;
	max-width:80%;
	padding: 0 6px 0 6px;
	font-size: 14px;
	
}

.boiteDeContenu p span.mdp{ /*le mdp n'est pas affiché*/
  display: none;
}
.mdp_tag:hover + .mdp{
  display: inline;
}
	



/* ************************** Style the footer *******************************/
.footer {
  color: white;
  background-color: black; /*#f1f1f1*/
  padding: 10px;
  font-size: 0.75em;
  text-align : center;
  
}
#logoEcole{
	width : 10%;
	
}
.footer.p{
	
  /* display: flex;*/
}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .header .box_logo_page img{
    width: 100%;
  }
  .contenu {
    -webkit-flex-direction: column;
    flex-direction: column;
	justify-content: center;
  }
  #logoEcole {
	  width:30%;
  }
  .boiteDeContenu {
	max-width: 100%;
  }
}