* {
	margin: 0;
	padding: 0;
}
#conteneur
{ 	width: 1004px ;
    height: 704px ;
	outline: 1px solid#333 ;
	margin: 0 ;
	padding: 0 ;
    display: flex ;
    flex-direction: row ;
    justify-content: flex-start ;
    align-items: flex-start ;
	flex-wrap: wrap ;
	align-content: flex-start ; 
	
	border: 1px solid #dcb ;
}
/*
.element: element1
{ order: 1;  }
.element: element2
{ order: 2; }
.element: element3
{ order: 3; }
.element: element4
{ order: 4; }
.element: element5
{ order: 5; }
.element: element6
{ order: 6; }
.element: element7
{ order: 7; }
.element: element8
{ order: 8; }*/




.element1
{
/*align-content: flex-start ;*/
width: 170px ;
height: 160px ;
background: #ffffff url("images/mheaderg.jpg") center no-repeat  ;
color: #fff ; 
}
.element1 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}
.element1 h1 a {
color: #D1DDEF;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element1 h1 a:hover {
color: #fff;
}
.element2
{
width: 830px ;
height: 160px ;
background: #ffffff url("images/mheader.jpg") center no-repeat  ;
color: #fff ;  
text-align: center;
}
.element2 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}


.element2 h1 a {
color: #D1DDEF;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element2 h1 a:hover {
color: #fff;
}
.element3
{
/*align-content: flex-end ;*/
width: 170px ;
height: 25px ;
color: #fff ;  


}
.element3 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}
.element3 h1 a {
color: #D1DDEF;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element3 h1 a:hover {
color: #fff;
}
.element4
{
/*align-content: flex-start ;*/
width: 830px ;
height: 25px ;

color: #fff ;


}
.element4 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}
.element4 h1 a {
color: #D1DDEF;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element4 h1 a:hover {
color: #fff;
}
.element5
{
/*align-content: flex-start ;*/
width: 170px ;
height: 490px ;
color: #000000  ;


}
.element5 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}
.element5 h1 a {
color: #D1DDEF;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element5 h1 a:hover {
color: #fff;
}
.element6
{
/*align-content: flex-start ;*/
width: 830px ;
height: 500px ;
background: #ffffff url("images/mathaypale.jpg") no-repeat  ;
color: #000000 ; 
margin: 0;
padding: 0;
border: 0px solid #dcb ;
text-align: center;
z-index:1;
font-size: 100%;
}
.element6 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #000000;
}
.element6 h1 a {
color: #000000;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element6 h1 a:hover {
color: #000;
}
.element7
{
/*align-content: flex-start ;*/
width: 170px ;
height: 25px ;

color: #fff ; 
}
.element7 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}
.element7 h1 a {
color: #D1DDEF;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element7 h1 a:hover {
color: #fff;
}
.element8
{
/*align-content: flex-start ;*/
width: 830px ;
height: 25px ;

color: #fff ; 
}
.element8 h1 {
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}
.element8 h1 a {
color: #D1DDEF;
text-decoration: none;
font-weight: 400;
letter-spacing: -7px;
}
.element8 h1 a:hover {
color: #fff;
}
/* ------------------------------------------------------------------------------------
ThE Drop-down Menu  
------------------------------------------------------------------------------------ */
.menu
{
	z-index:100;
	width: 830px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute  ; 
/*	top: 1;
	left: 1;*/
	
	}
.menu li
{
	float: left;
	width: 138px;
	margin: 0;
	padding: 0;
	border: 0;
	
}
.menu li a:link, .menu li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
	font-size: 100%;
}
.menu li a:hover { background-color: #F2462E; }
.menu li a:active { background-color: #5F879D; }

.menu .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 4px 8px;
width: 138px;
	border: 0;

}
.menu .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0px 0px;
	border: 0;
	width: 100px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
.menu .sousMenu li a:link, .menu .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: #3B4E77;
}
.menu .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}

.menu li:hover > .sousMenu { display: block; }

/* 
--------------------------------------*/
.left {
float: left;
width: 160px;
height: 490px;
padding-top: 0px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 24px;
line-height: 24px;
color: #7988AF;
font-size: 15px;
}
.left ul {
padding: 10px 0 15px 30px;
list-style-type: square;
color: #99AECD;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {
}

.drapeau {
height: 25px;
float: left;
width: 170px;
padding-top: 0px;
}


#footer {
text-align: center;
font-size: 12px;
color: #aaa;
}
#footer a { color: #aaa; }
#footer a:hover { color: #111; }

div#galerie 
 { 

background: #FFFFFF url("images/mathaypale.jpg") no-repeat;
	float: right;
	width: 828px;
	height: 430px;
	text-align: center;
	padding-top: 0px;
	z-index:1;
	position:absolute  ;
   
 }
 ul#galerie_mini
 {
 margin: 0 ;
 padding: 0 ;
 list-style-type: none ;
 left: 42px ;
 }
 ul#galerie_mini
 li {
 float: left;
  }
 ul#galerie_mini  li a img
 {  
 margin: 2px 1px ;
 border: 1px solid #dcb ;
 }  dl#photo 
 {
 clear: both ;
 margin: 0 auto ;
 }
 dl#photo dt
 { 
 font: italic 2.5em/1.5em Georgia, serif ;
 color: #dcb ;
 }
 dl#photo dd
 { 
 margin: 0 ;
 }
 dl#photo img
 { 
 border: 1px solid #dcb ; 
 }
 
/* ------------------------------------------------------------------------------------
Tables tarifs  
------------------------------------------------------------------------------------ */
 
.t1 
 { 
border:3px solid #6495ed;
border-collapse:collapse;
text-align : left;
margin:auto;
width: 450px
 }
.t1 th { background-color: #ffd78c; } /* couleur fond cellules titres colonnes */

 .t2
 { 
border:3px solid #6495ed;
border-collapse:collapse;
text-align : left;
margin:auto;
width: 650px
 }
 
 /* Style des cellules */
.table-ligne1 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
  color : #333333;            /* couleur texte */
  background-color : #FFA947; /* couleur de fond */
/* display: flex; justify-content: center; */
  }
  
.table-ligne2 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
  color : #333333; 
  background-color : #EBF213; 
  }
  
  .table-ligne3 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
  color : #333333; 
  background-color : #FF5521; 
  }
  
  .table-ligne4 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
  color : #333333; 
  background-color : #FF0000; 
  }

.t1 th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px;
	width:100px;
	text-align: center;
}

.t1 td {
	border: 1px solid rgb(190, 190, 190);
    padding: 10px;
	width:100px;
    text-align: center;
}
.t3 
 { 
/* align-content: left ;*/
border:3px solid #6495ed;
border-collapse:collapse;
text-align : center;
margin:auto;
width: 830px
 }
 
 .t3 td {
	width:100px;
	 height: 15px;
	border: 1px solid rgb(190, 190, 190);
    padding: 0px;
/*	background-color : #EBF213;  couleur de fond pour toute la ligne*/
    text-align: center;
}

 /* Style des cellules */
.t3-cel1 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : center;
  color : #333333;            /* couleur texte */
  background-color : #EBF213; /* couleur de fond cellule*/
/* display: flex; justify-content: center; */
  }
  
.t3-cel2 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : center;
  color : #333333; 
  background-color : #FFA947; 
  }
  
  .t3-cel3 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : center;
  color : #333333; 
  background-color : #FF5521; 
  }
  
  .t3-cel4 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : center;
  color : #333333; 
  background-color : #FF0000; 
  }
.t3-cel5 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : center;
  color : #FFFFFF; 
  background-color : #850F0F; 
  }
    /* ------------------------------------------------------------------------------------
T4- table contact
------------------------------------------------------------------------------------ */
.t4 
 { 
/* align-content: left ;*/
border:3px solid #6495ed;
border-collapse:collapse;
text-align : left;
margin:auto;
width: 500px ;
 }
 
 .t4 td {
	width:100px;
	 height: 15px;
/*	border: 1px solid rgb(190, 190, 190); */
    padding: 0px;
/*	background-color : #EBF213;  couleur de fond pour toute la ligne*/
    text-align: left;
}

 /* Style des cellules */
.t4-cel1,  .t4-cel3, .t4-cel5
{
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
  border: 0;
  color : #333333;            /* couleur texte */
  background-color : #D9FFF5;  /* couleur de fond cellule*/
/* display: flex; justify-content: center; */
  }
  
.t4-cel2, .t4-cel4, .t4-cel6 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
 /* border: 1px solid rgb(190, 190, 190);*/
  color : #333333; 
  background-color : #D9FFF5; 
  }
  /* ------------------------------------------------------------------------------------
T5- table contact Vos coordonnées
------------------------------------------------------------------------------------ */
.t5 
 { 
/* align-content: left ;*/
border:3px solid #6495ed;
border-collapse:collapse;
text-align : left;
margin:auto;
width: 500px;
 }
 
 .t5 td {
	width:300px;
	 height: 15px;
/*	border: 1px solid rgb(190, 190, 190); */
    padding: 0px;
/*	background-color : #EBF213;  couleur de fond pour toute la ligne*/
    text-align: left;
}

 /* Style des cellules */
.t5-cel1,  .t5-cel3, .t5-cel5
{
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : center;
  border: 0;
  color : #333333;            /* couleur texte */
   background-color : #EBF213;  /* couleur de fond cellule*/
/* display: flex; justify-content: center; */
  }
  
.t5-cel2, .t5-cel4, .t5-cel6 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
 /* border: 1px solid rgb(190, 190, 190); */
  color : #333333; 
  background-color : #D9FFF5; 
  }  
  /* ------------------------------------------------------------------------------------
T6- table contact Votre message
------------------------------------------------------------------------------------ */
.t6 
 { 
 border:3px solid #6495ed;
border-collapse:collapse;
text-align : left;
margin:auto;
width: 500px ;
 }
 
 .t6 td {
	width:200px;
	 height: 15px;
/*	border: 1px solid rgb(190, 190, 190); */
    padding: 0px;
/*	background-color : #EBF213;  couleur de fond pour toute la ligne*/
    text-align: left;
}

 /* Style des cellules */
.t6-cel1,  .t6-cel3, .t6-cel5
{
  width:100px;
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  text-align : left;
  border: 0;
  color : #333333;            /* couleur texte */
   background-color : #EBF213;  /* couleur de fond cellule
/* display: flex; justify-content: center; */
  }
  
.t6-cel2, .t6-cel4, .t6-cel6 {
  font-size : 12px; 
  font-family : Verdana, arial, helvetica, sans-serif; 
  width: auto ;
  text-align : left;
  /* border: 1px solid rgb(190, 190, 190); */
  padding:0 ;
  color : #333333; 
  background-color : #D9FFF5; 
  }  
  nav{
    width: 100%;
    margin: 0 auto;
    background-color: white;
    position: sticky;
    top: 0px;
}
.conteneur-nav{
    position: absolute;
    width: 100%;
}
nav input[type=checkbox]{
    display: none;
}
nav label{
    display: inline-block;
    width: 100%;
    padding: 10px 0px;
    text-align: center;
    background-color: gold;
}
nav ul{
    display: none;
    list-style-type: none;
    background-color: #555;
}
nav input[type=checkbox]:checked + ul{
    display: flex;
    flex-flow : column wrap;
}
nav ul li{
    flex: 1 1 auto;
    text-align: center;
}
nav > div > ul > li > a{
    color: white;
}
nav a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px 0px;
}
.sous{
    display: flex;
    flex-flow: column wrap;
    z-index: 1000;
}

.sous li{
    flex: 1 1 auto;
    text-align: left;
}
.sous a{
    padding: 10px;
    background-color: RGBa(200,200,200,0.8);
}

@media screen and (min-width: 980px){
    .conteneur-nav{
        position: static;
    }
    nav label, nav input{
        display: none;
    }
    nav input[type=checkbox]:checked + ul, nav ul{
        display: flex;
        flex-flow: row wrap;
        background-color: white;
    }
    nav ul li{
        position: relative;
    }
    nav > div > ul > li > a{
        color: black;
    }
    nav a{
        border-bottom: 2px solid transparent;
    }
    nav a:hover{
        color: orange;
        border-bottom: 2px solid gold;
    }
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #CCC;
        background-color: white;
        position: absolute;
        width: 100%;
    }
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
    }
    .sous a{
        border-bottom: none;
        background-color: white;
    }
    .sous a:hover{
        border-bottom: none;
        background-color: RGBa(200,200,200,0.1);
    }
    .deroulant > a::after{
        content:" ▼";
        font-size: 12px;
    }
}

.conteneur-contenu{
  margin: 50px 20px;
  height: 1500px;
}