/* ////////////////////////////////////-------  Le Body  -----////////////////////////////////////////////*/

body {
background-color: white;
font: Verdena, Arial, Helvetica, sans-serif;
margin: 0;
}


main {
margin:auto;
float : center ;
position :middle;
display : flex;
}


.content {
  max-width: 100%;
  margin: auto;
  background: white;
  padding: 0px;
  font-family:arial ; 
  left : center;
}

ul {
  float : center ;
  padding: 0px;
  font-family:arial ; 
}



/*///////////DDDDDDDDDDD//////////------------------- Bar de Navigation --------------------////////////DDDDDDDDDDDDDDDDD////////////*/


.topnav {
  overflow: hidden;
  background-color: #086A87;
}


.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 12px 25px;
  text-decoration: none;
  font-size: 16px;
  font-family: Arial;
}


.topnav a:hover {
  background-color: orangered;
  color: white;
}

.topnav a.active {
  background-color: #086A87;
  color: blue;
   margin: 0px auto 0 auto;
   padding : 0px ;
   }
   

.topnav .icon {
  display: none;
}


/* ///////////FFFFFFFFFFFFFFFFFF/////////// ---------- Changement de la Barre de Navigation  avec la largeur d'écran --------- ///////////////FFFFFFFFFFFFFFFFFFFFFFF/////////////*/


@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  
  .topnav .icon i {
  font-size: 28px;   /* augmente la taille */
}

.topnav .icon {
  padding: 16px 20px;
}
  
}

/* ///////////FFFFFFFFFFFFFFFFFF/////////// ---------- Fin de la bar de Navigagtion --------- ///////////////FFFFFFFFFFFFFFFFFFFFFFF/////////////*/



/*///////////DDDDDDDDDDD//////////------------------- Début de header --------------------////////////DDDDDDDDDDDDDDDDD////////////*/

header#haut {
   margin: 0px 0px 0px 0px;
   padding : 0px ;
   background-color: white; 
   border-radius : 0px;
   text-align: center;
   }


header#haut h1, header#haut h2 {
	color: white;
	margin: 0px 0px 0px 0px;
	}
	
/* ///////////FFFFFFFFFFFFFFFFFF/////////// ---------- Fin de Header --------- ///////////////FFFFFFFFFFFFFFFFFFFFFFF/////////////*/




/*///////////DDDDDDDDDDD//////////------------------- Début de footer --------------------////////////DDDDDDDDDDDDDDDDD////////////*/

footer#pied {
   padding : 0px ;
   border-radius : 0px;
   background-color: #086A87 ; 
   clear: both; 
   height: 500px;   
}
footer#pied p {
	text-align: center;
	font-size :.75em;
	color : white ;
}

footer#pied a {
	color : white ;
	}	
	
/* ///////////FFFFFFFFFFFFFFFFFF/////////// ---------- Fin de footer --------- ///////////////FFFFFFFFFFFFFFFFFFFFFFF/////////////*/




/* ///////////FFFFFFFFFFFFFFFFFF/////////// ---------- les titres <hi=1,....7> --------- ///////////////FFFFFFFFFFFFFFFFFFFFFFF/////////////*/

h1  { 
margin: 0;
font-family: Arial;
font-size:160%;
color : #035DA3 ;
float: center ;
}


h2 { 
text-align : center;
margin: 0px 0px px 0px;
font-family: Arial;
font-size: 130%;
color : #DF7401 ;
text-align: justify;
}

h3 { 
text-align : left;
margin: 0px 0px 0px 0px;
font-family: Arial;
font-size: 75%;
color : #086A87 ;
}



h4{ 
text-align : left;
margin: 0px 0px 0px 0px;
font-family: Arial;
font-size: 50%;
color : white;
}


h5 { 
text-align : left;
margin: 10px 30px  0px  30px;
font-family: arial;
font-size: 72%;
color : white;
text-align: justify;
}

/* ///////////FFFFFFFFFFFFFFFFFF/////////// ---------- Fin des titres <hi=1,....7> --------- ///////////////FFFFFFFFFFFFFFFFFFFFFFF/////////////*/


/* ///////////FFFFFFFFFFFFFFFFFF/////////// ---------- Caractéres des textes  <p> --------- ///////////////FFFFFFFFFFFFFFFFFFFFFFF/////////////*/
/*------------------ Couleurs :  00437A   /  0088DE  /128fe1 / 484848 /  777777 /  d73d2f / e52043  /5b5b5b /  /323639  /00437A --------------------------------------------------------------------------------------------------------------------------*/
p { 
font-family: Arial;
color : #035DA3;
text-align : left;
line-height:130%;
text-align: justify;
margin : 15px ;

}

#c1 {
		width : 70% ;
	}
		
#c2 {
		font-size: 100%; ;
	}

#c3 {
		font-size: 110%; ;
	}

/*----------------------------------------------------------------- Fin des caractéres des textes  ---------------------------------------------------------------------------*/	
	







/* /////////////////////////// ---------------------------- I:  Dimentionnement des Écrans  Avec la Largeur des Écrans -------------------------- ////////////////////////////////*/

/* ////////////////////// ------------------------- I.1: Difinition des Colonnes ou des Gris  ----------------- /////////////////////////*/

.row:after {
  content: "";
  display: table;
  clear: both;
}

 .column {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 10%;
  padding: 0 0px;
  float: left;
}


 .column1 {
  float: left;
  padding: 0px;

}

.column11 {
  float: left;
  padding: 0px;

}

 .column2 {
  float: left;
  padding: 0px;
 
}

 .column22 {
  float: left;
  padding: 0px;
 
}

 .column2_2 {
  float: left;
  padding: 6px;
  width: 0%;  
}


 .column3 {
  float: left;
  padding: 0px;
}


 .column3_1 {
  float: left;
  padding: 0px;
  width: 52%; 
}

 .column_11 {
  float: left;
  padding: 0px;
  width: 4%; 
}



 .column21_2 {
  float: left;
  padding: 4%; 
}



 .column2_1 {
  float: left;
  padding: 0px;
  width: 6%; 
}


 .column4 {
  -ms-flex: 16.6%; /* IE10 */
  flex: 16.6%;
  max-width: 16.6%;
  padding: 0 0px;
  float: left;
}

.column5 {
  float: left;
  padding: 0px;
  width: 90%; 
}

.column6{
  float: left;
  padding: 0px;
  width: 90%; 
}
 

 .column8 {
  -ms-flex: 33.33%; /* IE10 */
  flex: 33.33%;
  max-width: 33.33%;
  padding: 0 0px;
  float: left;
}

 .column9 {
  -ms-flex: 12.5%; /* IE10 */
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 0px;
  float: left;
}

  .column10{
  -ms-flex: 100%;
   flex: 100%;
   max-width: 100%;
   margin-bottom: 0px;
   margin: 0px 0px  0px;
  }
  
  .column21{
  -ms-flex: 33.333%; /* IE10 */
  flex: 33.333%;
  max-width: 33.333%;
  padding: 0px 0px 0px;
  float: left;
}

  
  .column25{
  -ms-flex: 100%; /* IE10 */
  flex: 100%;
  max-width: 100%;
  padding: 0 0px;
  float: left;
}



  
  
 .container5::after, .row::after {
  content: "";
  clear: both;
  display: table;
} 

.content5{
  max-width: 90%;
  margin: auto;
  background: white;
  padding: 0px;
  font-family:arial ; 
  float : center;
}



.container5 .content5 {
  position: absolute; /* Position the background text */
  bottom: 3px;
   right: 0.0%;
  /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0.1, 0.1, 0.55); /* Black background with 0.5 opacity */
  color: red; /* Grey text */
  width: 98%; /* Full width */
  padding: 22px; /* Some padding */
}


.container5 {
  position: relative;
  max-width: 800px; /* Maximum width */
  margin: 0; /* Center it */
  padding: 0px;
}



/* //////////////--------------- I.3: Difinition des Colonnes pour images  -------------- /////////////////////////*/




/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

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

 .column1 {
  width: 25%; 
}

 .column2 {
  width: 30%; 
}

.column22 {
  width: 20%; 
}


 .column3 {
  width: 60%; 
}

.column11 {
   width: 20%;
}

 .column10 {
  display : none ;
}


.c1 {
		width : 64% ;
	}
	
	
}




@media screen and (max-width: 1500px) {
		
.column3 {
  width: 70%; 
}

.column11 {
   width: 15%;
}
	

 .column1 {
  width: 20%; 
}

 .column2 {
  width: 35%; 
}

.column22 {
  width: 25%; 
}



.c1 {
		width : 63% ;
	}
	
.c2 {
		font-size: 98%; ;
	}
	
.c3 {
		font-size: 125%; ;
	}

	
.c4{
		font-size: 100%; ;
	}

.c5{
		font-size: 50%; ;
	}
}





@media screen and (max-width: 1250px) {
	
 .column3 {
  width: 80%; 
}

.column11 {
   width: 10%;
}
	
 .column1 {
  width: 15%; 
}

 .column2 {
  width: 45%; 
}

.column22 {
  width: 25%; 
}


.c1 {
		width : 68% ;
	}
	
.c2 {
	   font-size: 95%; ;
	}
	
.c3 {
	font-size: 120%; ;
	}
	
	.c5{
		  display : none ;
}

}




@media screen and (max-width: 900px) {
	
	
.column3 {
  width: 90%; 
}

.column11 {
   width: 5%;
}
 

.column1 {
  width: 10%; 
}

.column2 {
  width: 50%; 
}

.column22 {
  width: 30%; 
}

  
.c1 {
		width : 85% ;
	}
.c2 {
		font-size: 85%; ;
	}
 
.c3 {
		font-size: 115%; ;
	}

 
}





/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	
	
.column3 {
  width: 100%; 
}

.column11 {
   width: 0%;
}


.column1 {
  width: 2%; 
}

 .column2 {
  width: 96%; 
}

.column22 {
  display : none ; 
}



.column5 {
 display : none ; 
}

.column2_2 {
   display : none ;
}

 
.column21 {
   display : none ;
}
 

.column10 {
  display : none ;
}

.c1 {
		width : 99% ;
	}
	
.c2 {
		font-size: 80%; ;
	}
	
.c3 {
		font-size: 110%; 
	}





}





   /* //////////////////////// ------------------------- I.2:  Selection des colonnes/Gris en fonction de la largeur de l'écran   ------------------------ ///////////////////////////////*/

 

  
  
   @media screen and (max-width: 900px) {
  .column9{
   display : none ;
  }
  

  }
  
  
  @media screen and (min-width: 900px) {
  .column4{
   display : none ;
  }
  
  } 
  
  
   @media screen and (min-width: 1250px) {
  .column9{
   display : none ;
  }
  
  }
 


   @media screen and (max-width: 1250px) {
  .column{
   display : none ;
  }
  }
  
  
  
   @media screen and (max-width: 600px) {
  .column4{
   display : none ;
  }

 
   p  {
   font-size:100%;
   text-align: left;
   color : #086A87;
   } 
   
   h1  { 
  font-size:140%;
    color : #086A87;
   }

   h2 { 
  font-size: 120%;
    color : #DF7401;
     }

  }
  
   @media screen and (min-width: 600px) {
  .column8{
   display : none ;
  }
   .column2_1{
   display : none ;
   }
   
   .column25{
   display : none ;
  }
   
  
  }