*{margin:0; padding:0;}
/* Evite bug de redimensionnement  avec IE */

/*---------------Généralités----------------------------*/
#mobile {display:none;}

html {
	height :100%;
	width:100%;
	font-size:100%; 
	margin:0;
    padding:0;
    }
      
body{
	background-color:#EEEEEE;
	height:100%;
	min-width:400px;
	max-width:1200px;
    font-family: arial, sans-serif;
    font-size: 1em;
    line-height: 1.25;
    margin:0 auto;
    }
    
img#fond{
	z-index:-2;
	display:block;
	position:fixed;	
	top:0%;
	width:100%;
	min-width:400px;
	max-width:1200px;
	height:auto;	
	}
	
header{
	background-color:none;
	z-index:-2;
	height:15%;
	width:100%;
	min-width:400px;
	max-width:1200px;
	margin:2% 0 35% 0;
	}
	
nav{
	padding:0.5% 2%;
	}
	
main{
	background-color:none;
	opacity:1;
	height:auto;
	width:100%;
	min-width:400px;
	max-width:1200px;
	margin:5% 0 2% 0;
	}
		
section{
	background-color:#E1E1E1;
	display:block;
	margin:2%;
	padding:1%; 
	height:auto;
	} 
	
footer{	
	background-image:url(mjc_image/mains.jpg);
	background-repeat:repeat-x;
	width:100%;
	height:10%;
	}
			
section img{
	width:100%;
	box-shadow:8px 8px 6px grey;
	/*min-width:390px;*/
	} 
		
h1{
	font-family: Bradley Hand, arial, sans-serif;
	font-size: 2.5em;
	color:#8E0764;
	font-weight:bolder;
	text-decoration:underline;
	padding:0em 0em 1em 1em;
	text-align:left;
	}
	
h1:first-letter {
	font-size:200%;
	}
	
h3	{font-family: Bradley Hand, arial, sans-serif;
	font-weight:bolder;
	font-size: 2em;
	color:#8E0764;
	text-indent:2em;
	}			
h4	{
	font-size: 1.2em;
	color:#8E0764;
	text-indent:5em;
	}
	
p	{text-indent: 4em;
	padding:0.2em 0 0.3em 2em;
	}
		
hr	{
	margin:1em auto;
	width:90%;
	}
	
th {
	padding:1.5em 0em 1.5em 0em;
	}
	
td {
	padding:0.5em 0em 0.5em 0em;
	}
	
input[type=submit], input[type=reset]{
	display:block;
	font-size:1em; 
	padding:0.3em 2em 0.3em 2em;
	margin:2em auto;
	cursor:pointer;
	}
	
input[type=submit].lien
	{font-size:1em;
	font-weight:bold;
	font-style:italic;
	color: #808080;
	text-decoration:none;
	background-color:#E1E1E1;
	border-style:none;
	border-width:0px;
	border-color:#F0F0F0;
	padding:0;
	margin:0;
	}
	


input[type=submit].retour
	{font-size:1em;
	font-weight:bold;
	font-style:italic;
	color: #808080;
	text-decoration:none;
	background-color:#EEEEEE;
	border-style:none;
	border-width:0px;
	border-color:#F0F0F0;
	padding:0;
	margin:1.5em 0;
	}	
		
input[type=text], input[type=password]{
	font-size:0.8em; 
	padding:0.3em 0.5em 0.3em 0.5em;
	margin:1em 2em 0em 2em;
	}
		
/*----------------- header -----------------------------*/

header img.barbouille{
	position:absolute;
	z-index:1;
	top: 0%;
	width:65%;
	max-width:700px;
	}

header img.blason{
	position:relative;
	z-index:1;
	width:15%;
	top: 0%;
	left: 82%;
	}
	
header img.logo{
	position:relative;
	width:30%;
	max-width:300px;
	top : 0em;
	left:2em;
	}
	
header p{
	position:relative;
	top:1%;
	right: 2%;
	text-align:right;
	font-size:4.5rem;
	font-family:Arial;
	font-weight: bold;
	text-indent: 0em;
	padding:0em;
	}	
	
/*----------------- footer -----------------------------*/

footer p{
	text-indent:0em;
	font-size: 0.5em;
	text-align:center;
	margin:auto;
	padding-top: 1em;	
	}
/*------------- index ------------------------------------*/	
	
#activite{	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;	
} 
	 
.box_activite{
	width:25em;
	height:21em;
	background-color:#E1E1E1;
	border-style:none;
	border-width:1px;
	border-color:#DBDBDB;
	margin:1em;	
}
		
.activite_titre{	
	position: absolute;
	margin:0.3em 0.2em;
	line-height:0.8em;
}
	
p.activite_droite{
	position: relative;
	text-align:right;
	font-size: 1.5em;
}	
/*-----------------------class ecriture-------------------------*/

.rouge	{
	text-align: center;
	text-indent: 0em;
	color : #FF0000!important;
	padding:0em;
	margin:0em;
} 
	
.vert	{
	text-align: center;
	text-indent: 0em;
	color: #0CA650!important;
} 
	    
.center {
	text-align : center;
	text-indent : 0em;
	padding-left:0em;
}
	
.left{
	text-align : left;
	text-indent : 0em;
	padding-left: 1em;	
} 

.right{
	text-align : right;
	text-indent : 0em;
	padding-right: 0em;		
}
	
.gros{
	font-size:160%;
}			
/*-----------------anim-------------------------------*/

section.anim{
	text-align :center;
	padding:2em 1em;
	position:relative;
	margin:1em;
	height: auto;
	width: auto;
	}
	
section.anim table{
	margin : 0 auto;
	}

section.anim p{
	color:#7F7F7F;
	padding:0.2em;
	}
		
section.anim table td {
	text-align :left;
	}
	
section.anim h3{
	padding:0 1em 2em 1em; 
	color:#7F7F7F;
	}
		
section.anim table {
	margin-bottom: 3em;
	}
	
section.anim table th{
	padding: 1em;
	background-color: #C7C7C7;
	font-style:italic;
	}
	
section.anim table td{
	padding: 1em;
	}

section.anim table td a{
	font-style:italic;
	}
	
section.anim input[type=submit].lien{
	display:inline;
}

section.anim input[type=submit].oubli
	{font-size:0.4em;
	font-style:italic;
	color: #ACACAA;
	text-decoration:none;
	background-color:#F0F0F0;
	border-style:none;
	border-width:0px;
	border-color:#F0F0F0;
	}		
/*-----------------------saisie-------------------------------*/	

.saisie h1{
	font-family: Bradley Hand, arial, sans-serif;
	font-size: 2em;
	color:#8E0764;
	font-weight:bolder;
	text-decoration:underline;
	padding:0.6em 0em 1em 1em;
	text-align:left;
	}

.saisie p{
	font-size:1em;	
	padding:0.6em 0 0.6em 1em;
	text-indent: 1em;
	padding:0.9em;
	}
	
section.saisie img{
	display:block;
	width:20% !important;
	min-width:150px;
	margin:auto;	
}
	
.saisie table{
	margin:auto;
	width:80%;
	min-width:380px;
	max-width:600px;
}

.saisie textarea{
	display:block;
	width:95%;
	margin:auto;
	padding:0.5em;
}
	
.rubrique{
	font-size:medium;
	text-decoration: none;
}

.erreur{
	color:#FF0000;
	text-align:center;
}

#flex{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
}

.box_flex{
	width:9em;	
	height:auto;
	border-style:none;
	margin:0em;
	background-color:none;
}

.box_flex p, select{
	padding:0.1em;
	display:inline;
}  

.box_flex_img{
	width:9em;	
	height:auto;
	border-style:none;
	margin:0.2em;
	background-color:none;
}  

section.saisie input[type=submit].suppr{
	margin:auto;
	padding : 0.5em, 1.5em;
	font-size:0.6em;
	font-style:normal;
	color: #969696;
	text-decoration:none;
	background-color:#F0F0F0;
	border-style:solid;
	border-width:1px;
	border-color:#969696;	
}	

section.saisie input[type=submit].suppr:hover{
	background-color:red;	
}	
/*---------------------------module_souvenir-------------------------*/

#flex_souvenir{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
}

.box_flex_souvenir{
	width:8em;	
	height:auto;
	border-style:none;
	margin:0.5em;
	background-color:none;
} 

input[type=submit].plus
	{font-size:1em;
	font-weight:bold;
	font-style:italic;
	color: #808080;
	text-decoration:none;
	background-color:#E1E1E1;
	border-style:none;
	border-width:0px;
	border-color:#F0F0F0;
	padding:0;
	margin-top:3em;
}
/*----------------------------menu--------------------------*/

#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:right;
}
#menu li{
display:inline-block;
position:relative;
border-radius:15px 0 0 0;
text-align:center;
}
#menu ul li{
display:inherit;
border-radius:0;
}
#menu ul li:hover{
border-radius:0;
}
#menu ul li:last-child{
border-radius:0 0 8px 0;
}
#menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul{
max-height:50em;
}

/* couleur des liens menus */

#menu li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #896DA9 0%, #2A2333 100%);/*dégradé pour safari et chrome*/
background-image:linear-gradient(to bottom, #896DA9 0%, #2A2333 100%);/*couleur du dégradé*/
}
#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:last-child{
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F69090 0%, #C80202 50%);
background-image:linear-gradient(to bottom, #F69090 0%, #C80202 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: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:last-child:hover, #menu li:last-child li:hover{
background:#C80202;
}

/* les a href */

#menu a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#CCC;
font-family:arial;
}
#menu ul a{
padding:8px 0;
}
#menu li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
}

/*-------------------------------------------------------------
					REPONSIVE
----------------------------------------------------------------*/

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

#menu{display:none;}
#mobile{display:block;}

#ordi{display:none;}
#mobile{display:block;}

h1{font-size:2em;
	text-decoration:none;
	text-align:center;
	padding:0;
}
	
p, h4{text-indent: 1em;}

section.anim input[type=submit].lien{
	display:block;
}

section img{
	width:90% !very important;
}
	
#mobile, #mobile ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
z-index:1;
}
#mobile li{
display:inline-block;
position:relative;
border-radius:15px 0 0 0;
text-align:center;
}
#mobile ul li{
display:inherit;
border-radius:0;
}
#mobile ul li:hover{
border-radius:0;
}
#mobile ul li:last-child{
border-radius:0 0 8px 0;
}
#mobile ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}

#mobile li:hover ul{
max-height:30em;
}

/* couleur des liens menus */

#mobile li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #896DA9 0%, #2A2333 100%);/*dégradé pour safari et chrome*/
background-image:linear-gradient(to bottom, #896DA9 0%, #2A2333 100%);/*couleur du dégradé*/
}
#mobile 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%);
}
#mobile li:last-child{
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}

/* background des liens sous menus */

#mobile li:first-child li{
background:#2A2333;
}
#mobile li:nth-child(2) li{
background:#333A40;
}
#mobile li:last-child li{
background:#9F391A;
}

/* background des liens menus et sous menus au survol */

#mobile li:first-child:hover, #menu li:first-child li:hover{
background:#65537A;
}
#mobile li:nth-child(2):hover, #menu li:nth-child(2) li:hover{
background:#729EBF;
}
#mobile li:last-child:hover, #menu li:last-child li:hover{
background:#F6AD1A;
}

/* les a href */

#mobile a{
text-decoration:none;
display:block;
padding:8px 26px;
color:#CCC;
font-family:arial;
}
#mobile ul a{
padding:8px 0;
}
#mobile li:hover li a{
color:#fff;
text-transform:inherit;
}
#mobile li:hover a, #menu li li:hover a{
color:#000;
}

}/*-------FIN DE REPONSIVE--------------------*/