/* ////////////////////////////////////-------  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;
}



/*  ----------------- Bouton bleu-orange pour formulaire de contact  -----------------------  */

   
        .search-container {
            background-color: #086A87; /* Fond gris foncé */
            padding: 1px;
            display: flex;
            align-items: center;
            gap: 5px;
            width: fit-content;
        }
        .search-input {
            padding: 2px;
            font-size: 14px;
            border: none;
            width: 53px;
            background-color: white;
            color: orangered;
            
        }
        .search-button {
            background-color: #086A87; /* Orange */
            color: white;
            padding: 10px 15px;
            border: white;
            font-size: 17px;
            cursor: pointer;
			
			
     
            font-weight: orangered;
        }
  





/* ///////////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 : #086A87 ;
float: center ;
}


h2 { 
text-align : center;
margin: 0px 0px px 0px;
font-family: Arial;
font-size: 130%;
color : #086A87 ;
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 : #086A87;
text-align : left;
line-height:120%;
text-align: justify;
margin : 10px ;

}

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

#c3 {
		font-size: 110%; 
		margin: 10px 10px 10px 10px;
	}
	
	#c40 {
		font-size: 100%; ;
	}


/*----------------------------------------------------------------- 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;
 
}


 .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;
}

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

 .column66{
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  max-width: 30%;
  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: 23%; 
}

 .column2 {
  width: 26%; 
}

.column22 {
  width: 24%; 
}

.column2_2 {
  width: 4%; 
}

 .column3 {
  width: 60%; 
}

.column11 {
   width: 20%;
}

 .column10 {
  display : none ;
}


.c1 {
		width : 75% ;
	}
	
.c6 {
		width : 65% ;
	}
	
.c7 {
		width : 30% ;
	}
	
	
	.c40 {
		font-size: 80%; ;
	}
	
	
	
}




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

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

 .column2 {
  width: 28%; 
}

.column22 {
  width: 26%; 
}

.column2_2 {
  width: 4%; 
}



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

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

.c5{
		font-size: 100%; ;
	}
	
		.c40 {
		font-size: 78%; ;
	}
	
	
}





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

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

 .column2 {
  width: 35%; 
}

.column22 {
  width: 33%; 
}

.column2_2 {
  width: 2%; 
}
 






.c1 {
		width : 68% ;
	}
	
.c2 {
	   font-size: 95%; ;
	}
	
.c3 {
	font-size: 120%; ;
	}
	
		.c40 {
		font-size: 75%; ;
	}
	
	


}




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

.column11 {
   width: 5%;
}
 

 .column1 {
  width: 10%; 
}

 .column2 {
  width: 80%; 
}

.column22 {
  width: 0%; 
}

.column2_2 {
  width: 0%; 
}
 
 
 
  
.c1 {
		width : 80% ;
	}
.c2 {
		font-size: 85%; ;
	}
 
.c3 {
		font-size: 115%; ;
	}
	
		.c5{
		  display : none ;
}


	.c40 {
		font-size: 72%; ;
	}
	

 
}





/* 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: 98%; 
}

.column11 {
   width: 1%;
}



.column66 {
 display : none ; 
}

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



.column5 {
 display : none ; 
}

.column2_2 {
   display : none ;
}

 
.column21 {
   display : none ;
}
 

.column10 {
  display : none ;
}

.c1 {
		width : 99% ;
	}
	
.c2 {
		font-size: 80%; ;
	}
	
.c3 {
		font-size: 110%; 
		padding: 100px 0px 00px 0px;
	}


	.c40 {
		font-size: 65%; ;
	}
	


}





   /* //////////////////////// ------------------------- 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 ;
  }
  
    .c6{
   display : none ;
  }
   
  
  }