/* CSS Document */
body
{
	width: 800px;
	margin: auto;
	margin-top: 0px;
	margin: auto;
	margin-bottom: 20px;
	background-color: #EFEFEF;
	font-size: 12px;
}



/* en-tête */

#en_tete
{
	width: 750px;
	height: 156px;
	background-color: #003366;
	margin-bottom: 0px;
	border-right: 24px solid #003366;
	border-left: 24px solid #003366;
	border-top: 10px solid #003366;
}

/* en-tête2 */

#en_tete2
{
   width: 750px;
   height: 300px;
   margin-bottom: 0px;
   text-align: center;
   border: 24px solid #003366;
}

/* en-tête3 */

#en_tete3
{
   width: 750px;
   height: auto;
   background-color: #003366;      
   text-align: center;
   margin-bottom: 0px;
   border: 24px solid #003366;
}


#en_tete4
{
	width: 750px;
	height: 28px;
	background-color: #003366;
	text-align: center;
	border-right: 24px solid #003366;
	border-left:  24px solid #003366;
	border-top: 5px solid #003366;
}


/* menu gauche */


#menu
{
	padding-right: 0px;
	padding-left: 0px;
	float: left;
	padding-bottom: 0px;
	margin: 0px 0px 0px 0px;
	height: auto; 
	width: 190px;
	padding-top: 0px;
	text-align: center;
	background-color: #003366;
	border: 10px solid #003366;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFFFFF;
	font-weight: bold;
}
   
.colorA
{
   border: #000000;
}

   
.colorB
{
   border: #000000;
}

.colorC
{
	border: #FFFFFF;
}

/* tableau menu */
#table2
{
	background-image: url("images/beige005.gif");
	font-style: italic;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	width: 200px;
	font-size: 14px;
	color: #000000;
	
		
}


#navigation { font-size:0.75em; width:190px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; } 
 
ul.top-level { background-color: #003366; }
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}
 
#navigation a {
 color: #fff;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
 
#navigation a:hover{
	background-color: #FF8C00;
}
 
#navigation li:hover {
 background-color: #003366;
}

/* corps de la page */

#corps
{
	width: 750px;
	height: auto;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
	color: #000000;
	background-color: #003366;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 24px solid #003366;
}

h1{
	text-align: center;
	font-size: 1.3em;
	color: Navy;
	font-weight: bold;
	margin-bottom: 15px;
}

h2{
	text-align:left;
	font-size:1.0em;
	color:white;
	font-weight:bold;
	margin-bottom:15px;
}

#corps2
{
	width: 750px;
	height: auto;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
	color: #000000;
	background-color: #CCCCCC;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 24px solid #003366;
}


.style1
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}

.style5 {
   font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
}

#table1
{
	background-image: url("images/marb009.jpeg");
	border: 1px solid #003366;
	text-align: center;
	width: 507px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-bottom: 10px;
}

  .menu-icon {
    display: none;
  }
   
 
 
  .menu {
    display: none;
  }
  
  .menu li a {
   display: none;
  }


#test {
    display: none;
}

#tableclients
{
	text-align: left;
	width: 507px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
	border: 4px solid #003366;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 10px;
	color: #000000;
	
}

#tableclients
{
	text-align: left;
	width: 507px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
	border: 4px solid #003366;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 10px;
	color: #000000;
	
}

#tableclients2
{
	text-align: left;
	width: 700px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color: #F0F0F0;
	border: 4px solid #003366;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 10px;
	color: #000000;
}

.thcolor
{
	background-color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

.thcolorB
{
	background-color:   #043464;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

.thcolorBurg
{
	background-color:   #043464;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	a:link { text-decoration:none; font-weight:bold; color:#ffffff; }
    a:visited { text-decoration:none; font-weight:bold; color:#ffffff; }
    a:active { text-decoration:none; font-weight:bold; background-color:#ffffff; }
    a:hover { text-decoration:none; font-weight:bold; background-color:#1EAB1D; }
}


.thcolorC
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #B22222;
	
}

.thcolorD
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #043464;
	height: 50px;
	
}

.thcolorE
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
	
}


/* Millieu corp */
#corps1
{background-color:#CCCCCC
}



/* Le pied de page */

#pied
{
	width: 750px;
	text-align: center;
	color: #000000;
	border: 24px solid #003366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #DCDCDC;
	font-weight: bold;
	font-style: normal;
	
 
}


/* Couleurs personnalisables menu burg */
:root {
  --bg-color: #003366;
  --text-color: #ffffff;
  --accent-color: #ffffff;
  }

header {
  background-color: var(--bg-color);
  padding: 10px 20px;
  position: relative;
}

.menu-toggle {
  display: inline-block;
  cursor: pointer;
  width: 30px;
  height: 25px;
}

.menu-toggle span {
  display: block;
  height: 4px;
  background-color: var(--accent-color);
  margin: 5px 0;
  transition: 0.4s;
}

nav {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: var(--bg-color);
  display: none;
  flex-direction: column;
  align-items: center;
}

nav a {
  color: var(--text-color);
  text-decoration: none;
  padding: 15px;
  display: block;
  width: 100%;
  text-align: center;
  border-top: 1px solid #444;
}

/* Afficher le menu si activé */
#menu-checkbox:checked ~ nav {
  display: flex;
}

/* Masquer checkbox */
#menu-checkbox {
  display: none;
}

.submenu-container {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 10px 20px;

}

.submenu-container > a {
  position: relative;
  z-index: 2;
}

.submenu {
  display: none;
  flex-direction: column;
  background-color: #003366;
  width: 100%;
}

.submenu a {
  padding-left: 30px;
  border-top: 1px solid #555;
}

/* Affichage du sous-menu au survol ou clic */
.submenu-container:hover .submenu {
  display: flex;
}




@media screen and (min-width: 650px) {
  nav {
    position: absolute;
  }
}




/*mobile reg */
@media only screen and (max-width: 650px) AND (min-width:185px){

html, body {
	
	margin:0;
	padding:0; 
	height:100%;
	width:100%;
	font-family:Arial;
	font-size:1em;
	color:#000;
	background:#999999;
}

#corps
{
width:100%;
	padding:0;
	height:auto !important; 	
	overflow: hidden !important; 
	position:relative;
	background:#fff;
	margin:0;
	border-left:1px solid #000;
	border-right:1px solid #000;
}


 #tableclients {
  	text-align:left;	
	line-height:30px;
	width: 100%;
	margin:0;
	font-size:0.9em;
	padding:0;
  }

 #tableclients2 {
  	text-align:left;	
  	line-height:30px;
	width: 100%;
	margin:0;
	font-size:0.9em;
	padding:0;
  }

#en_tete
{
display: none;
}

/* en-tête2 */

#en_tete2
{
display: none;
}

/* en-tête3 */

#en_tete3
{
display: none;
}


#en_tete4
{
display: none;
}


/* menu gauche */


#menu
{
display: none;
}

#pied
{
display: none;
}