body {
height: 100%;
margin: 20px 3px 20px 3px;
background-color:#6d6c6d;
color:#000000;
font:0.8em Helvetica,Narrow;
text-align: center;
min-width: 250px;
}
.droit a {
margin: 1px;
padding: 1px;
top: 40px;
}
a:hover {
color: #de1927;
}
div.contenu {
position:relative;
background-color:#a4a2a4;
max-width: 80%;
border-radius:8px 8px 8px 8px;
border:0.18rem solid #00008B;
margin-right: auto;
margin-left: auto;
padding: 10px 3px 1px 3px;
}
div.main {
width: 95%;
display:table;
border:0.18rem solid #798081;
background-color:#cccccc;
border-radius:8px 8px 8px 8px;
padding: 20px 0 20px 0;
margin-right: auto;
margin-left: auto;
margin-top:60px;
margin-bottom:20px;
}
.liens{
float:left;
width:33%;

height:170px;
}
.demie{
width:50%;
/* height:200px; */
float:left;
}
.plein{
width:100%;
float:left;
/* height:170px; */
}
.footer {
width: 100%; /* On a indiqu� une largeur (obligatoire) */
float:left;
margin: auto; /* On peut donc demander � ce que le bloc soit centr� avec auto */
}
.droit {
text-align: right;
margin-right:15px;
}
.centrer {
text-align: center;
}
.gauche {
text-align: left;
margin-left:15px;
}
.pc-de {
	color: #993366;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	font-weight: bolder;
}
.gras-rouge {
	color: #A52A2A; /* brown; */
	font-family: sans-serif, Arial, Helvetica;
	font-size: 1.1em;
	font-weight: bold;
}
.normal-et-gros {
	color: #000000; /* noir */
	font-family: sans-serif, Arial, Helvetica;
	font-size: 1em;
	font-weight: normal;
}
.normal-et-gros  a{
	color: #000000; /* noir */
	font-family: sans-serif, Arial, Helvetica;
	font-size: 1.1em;
	font-weight: bold;
}
.bleu-italic{
	color: #00008B; /* darkblue; */
	font-family: sans-serif, Arial, Helvetica;
	font-size: 1.4em;
	font-weight: bold;
	font-style: italic;
}
.bleu-italic a{
	color: #000000;
	font-size: 0.8em;
	font-weight: bold;
	font-style: normal;
}
.gras-vert {
	color: #228B22; /* forestgreen; */
	font-family: sans-serif, Arial, Helvetica;
	font-size: 1.2em;
	font-weight: bold;
}
	/*	pour le calendrier	*/	/*	pour le calendrier	*/
.ds_box {
	background-color: #FFF;
	border: 1px solid #000;
	position: relative;
	/*	position: absolute;	*/
	z-index: 32767;
	
}
.ds_tbl {
	background-color: #FFF;
}
.ds_head {
	background-color: #333;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
}
.ds_subhead {
	background-color: #CCC;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width: 32px;
}
.ds_cell {
	background-color: #EEE;
	color: #000;
	font-size: 13px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
	cursor: pointer;
}
.ds_cell:hover {
	background-color: #F3F3F3;
} /* This hover code won't work for IE */

		/*	pour les ecrans plus grands que 699px	*/	/*	pour les ecrans plus grand que 699px	*/
@media (min-width: 699px){
	
#show-menu,#menu-mobile {
visibility: hidden;
}
#menu {
position:absolute;
width:100%; /* Longeur du bandeau */
height:2em; /* Hauteur du bandeau */
background:url(/image/bg.gif);
border-top:5px solid #993366; /* Change le dessus du bandeau */
padding-bottom:1px; /* Change le dessous du bandeau */
background:#000000 background:url(/image/line.gif) bottom left repeat-x;
right: 0px;
}
#menu, #menu ul {
  padding:0;
  margin:0;
  list-style: none;
  text-align: center;
}
#menu li {		/* Boutons niveau 1 */
  display:inline-block;
  vertical-align: top;
  position: relative;
  border-radius:8px 8px 0 0;	/* arondi haut des bouttons */
}
#menu li li {
display:inherit;
}
#menu a {
  display:block;
  padding:5px 25px;
cursor:pointer;
  text-decoration: none;
  color:#fff;
  font-family:arial;
}
#menu ul li a {
  padding:5px 5px;
}
#menu ul {
  position: absolute;
  z-index: 1000;
  min-width:100%;
  white-space: nowrap;
  text-align: left;
  -moz-transition: .8s all .3s;
  -webkit-transition: .8s all .3s;
  transition: .8s all .3s;
}
#menu ul ul {		/* Menu niveau 3 */
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
}
#menu li li:first-child {		/* Menu niveau 3 */
 border-radius:0 8px 0px 0;
 }
#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {		/* Menu niveau 2 */
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
  border-radius:0;	/* Enleve l'arondi des bouttons */
}
#menu ul li:last-child{	/* Dernier menu du  niveau 2 */
  border-radius:0 0 8px 8px;
}
#menu li li li {
  max-height: inherit;
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}
		/* background des liens menus */
#menu li:first-child{
  background-color: #65537A;
  background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
  background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu li:nth-child(2){
  background-color: #729EBF;
  background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
  background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu li:nth-child(3){
  background-color: #F6AD1A;
  background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
  background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu li:nth-child(4){
  background-color: #CFFF6A;
  background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
  background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu li:nth-child(5){
  background-color: #CFFF6A;
  background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
  background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
#menu li:last-child{
  background-color: #CFFF6A;
  background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
  background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
	/* background des liens sous menus */
#menu li:first-child li{
background:#2A2333;
}
#menu li:nth-child(2) li{
background:#333A40;
}
#menu li:nth-child(3) li{
background:#9F391A;
}
#menu li:nth-child(4) li{
background:#677F35;
}
#menu li:nth-child(5) li{
background:#677F35;
}
#menu li:last-child li{
background:#677F35;
}
	/* background des liens menus et sous menus au survol */
#menu li:first-child:hover, #menu li:first-child li:hover{
background:#65537A;
}
#menu li:nth-child(2):hover, #menu li:nth-child(2) li:hover{
background:#729EBF;
}
#menu li:nth-child(3):hover, #menu li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu li:nth-child(4):hover, #menu li:nth-child(4) li:hover{
background:#CFFF6A;
}
#menu li:nth-child(5):hover, #menu li:nth-child(5) li:hover{
background:#CFFF6A;
}
#menu li:last-child:hover, #menu li:last-child li:hover{
background:#CFFF6A;
}
/* les a href */
#menu a{
text-decoration:none;
display:block;
width:140px;
padding:5px 5px;	/* Hauteur et longueur bouton niveau 1 */
color:#fff;
font-family:arial;
}
#menu ul a{
padding:5px 0;
}
#menu li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
}
}
		/*	pour les ecrans de 1000px � 880px	*/	/*	pour les ecrans de 1000px � 880px	*/
@media (min-width: 900px) and (max-width: 1000px) {
div.contenu {
max-width: 95%;
}
}
		/*	pour les ecrans de 899px � 700px	*/	/*	pour les ecrans de 899px � 700px	*/
@media (min-width: 700px) and (max-width: 899px) {
	body {
	margin: 0;
}
div.contenu {
max-width: 100%;
}
#google {	/* partie � cacher*/
	visibility: hidden; */
	display:none;
	}
	#menu a{
		width:85px;	/*  longueur bouton niveau 1 */
	}
#menu ul li {
width:135px;
}
#menu ul li:first-child{	/* Premier menu du  niveau 2 */
  border-radius:0 8px 0 0;
}
}
		/*	pour les ecrans plus petits que 699px	*/	/*	pour les ecrans plus petits que 699px	*/
@media (max-width: 699px){
body {
	margin:0;
	padding:0;
background-color:#a4a2a4;
}
#cacher, #google {	/* partie � cacher */
/* visibility: hidden; */
display: none;
}
div.contenu {
border-radius:0;
padding: 10px 3px 0px 3px;
margin:0;
border:0;
max-width: 100%;
}
div.main {
	display:block;
	/* position:relative; */
	border:0;
	border-radius:0;
	padding:0;
	margin: auto;
	
}
.liens, .demie, .plein{
	border:0.18rem solid #798081;
	background-color:#cccccc;
	border-radius:8px 8px 8px 8px;
	box-shadow: 0px 0px 14px 5px #798081;
	width: 100%;
	padding:20px 0 0 0;
	font-size: 1.25em;
	margin:0 0 20px 0;
}
#bas{
position:relative;
top: 850px;
}
.top span.demie{
	position:relative;
	top: -600px;
	padding:20px 0 20px 0;
	margin:0 0 30px 0;
}
/*	Menu pour petit �cran	*/

  /* L'ic�ne hamburger, en utilisant le box-shadow */
  .header__icon {
    position: relative;
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background:Silver;
    border-radius: 6px;
    padding:3px;
    margin: 5px;
    top: -50px;
	box-shadow: 10px 10px 8px gray;
 }
  .header__icon:hover {
	box-shadow: 0px 0px 8px 5px gray;
 }
    .header__icon:after {
      content: '.';
	color: Silver;
      position: relative;
      display: block;
      width: 1.7rem;
      height: 0;
      left: 6px;
      box-shadow: 0 5px 0 1px white, 0 10px 0 1px white, 0 15px 0 1px white, 0 20px 0 1px white;
 }
	.header__icon:hover::after {
	box-shadow: 13px 9px 0 1px gray, 13px 3px 0 1px gray, 13px -3px 0 1px gray, 13px -9px 0 1px gray;
	transform: rotate(90deg);
 }
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	/* background: #03FFE7; */ /* turcoise */
	text-align: left;
	
	display:block;
}	

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ div#mobile{
    display: block;
}
div#mobile {
	display: none;
}
div#mobile a{
	color:#000000;
}
div#mobile ul{
list-style:none;
}
div#mobile li:hover{
	background:#DAA520; /* Maron */
	border-radius:8px 8px 8px 8px;
}
div#mobile li a{
	text-decoration:none;
	text-align: left;
	padding:0;
	margin:2px 0 0 5px;
	display:block;
	width:81px;
	height:18px;
}
div#mobile ul li{
	position:relative;
	right:60px;
	width:77px;
	background:#00FF00; /* vert */
	border:1px solid;
	border-radius:8px 8px 8px 8px;
	margin:8px 0 0 20px;
	padding:0;
}
div#mobile ul ul{
	position: absolute;
	top:-10px;
	left:85px;
	display:none;
}
div#mobile ul ul li{
	width:105px;
	background:#32CD32; /* vert moyen */
}
div#mobile ul ul li a{
	width:110px;
	margin:2px 0 0 2px;
	padding:0;
	height:18px;
}
div#mobile ul ul li:hover{	
	background:#D2691E; /* Maron moyen */
}
div#mobile ul ul ul{
	left: 110px;
}
div#mobile ul ul ul li{
	background:#228B22; /* vert fonc� */
}
div#mobile ul ul ul li:hover{
	background:#A0522D; /* Marron fonc� */
}
div#mobile ul.niveau1 li:hover ul.niveau2,div#mobile ul.niveau2 li:hover ul.niveau3{
	display:block;
}
}