/* définition générales Site antipass-sqy */
html{
 margin: 0.1em;		/* marge autour des objets */
 padding: 0;		/* padding nul */
 background-color: #eef; /* couleur générale de fond */
 color: #44d; 	 /* #111;couleur générale de caractère */
 width: auto;
}

/* définitions du corps de page */
body{
 font-size: 1em;
 font-style: normal;
 font-family: Verdana,"Times New Roman", Times, serif;
 width: auto;
 height: auto;
}

h1{
 margin-top:1.5%;
 font-size: 2em;
 font-weight: normal;
 text-align: center;
}
h2{
 margin-top:0.5%;
 font-size: 1.5em;
 font-weight: normal;
 text-align: center;
}
h3{
 margin-top:-2%;
 font-size: 1.1em;
 font-weight: normal;
 text-align: center;
 color: green;
}
/* définitions du paragraphe */
p {
 font-size: 0.9em;
 font-weight: normal;
 margin-left:0.1em;
 text-align: left;
}
/* définition de la première lettre d'un paragraphe */
p:first-letter{
}

/* définition de la première ligne d'un paragraphe */
p:first-line{
}

/* définition de listes */
li, li ul li{
 margin-top: 0.2em;
 margin-left: 2em;
 font-size: 0.9em;
 font-weight: normal;
 text-align:left;
 list-style:none;
}
/* lien */
a {
 vertical-align: middle;
 color:#555;
 text-decoration: none;
}
/* définition d'une ancre survolée */
a:hover{
 color: green;
}
/* définition d'une ancre visitée */
a:visited{
}
/* définition d'une ancre active */
a:active{
}

/* p de défilant */
marquee{
 text-align: left;
 color: red;
 font-size: 1em;
 font-weight: bold;
 margin-top:0%;
 margin-bottom:0%;	
}

#tableau {
 display: table;
 width: 100%;
 height: auto;
}

/* titre du site */
#header {
 display: table-header-group;
 width: 98%;
 height: 3em;
}
#header p {
 text-align: center;
 font-size: 2em;
 background-image:-webkit-linear-gradient(top, #050 0%, #eef 100%);
 background-image: linear-gradient(to bottom, #252 0%, #eef 100%);
 border-radius: 0.3em;
 margin: 0.1em;
 box-shadow: 0.1em 0.1em 0.1em #999;
 border:solid 0.05em #eef;
 color: white;
}

#footer {
 display: table-footer-group;
 background: #eee;
 width: 98%;
 height: auto;
 border: 1px solid blue;
}
#footer p{
 display: inline;
 text-align:center;
 margin-left: 0.2em; 
 font-size: 0.7em;
 color: green
}
/* format images W3C validator */
img.valide {
 margin-top: 0.1em;
 border:0; width:5em; height:2em;
}

/* menu et ses options */
#menu-accordeon {
  display: table-cell;
  list-style:none;
  width: 9em;
}
#menu-accordeon ul {
  padding:0;
  list-style:none;
/*  text-align: center;*/
  margin-left: 0;
}
#menu-accordeon li {
   background-color:#fff; 
   background-image:-webkit-linear-gradient(top, #050 0%, #eef 100%);
   background-image: linear-gradient(to bottom, #252 0%, #eef 100%);
   border-radius: 0.3em;
   margin-left: -1.3em; margin-right: 0.2em; margin-top: 0.1em; margin-bottom: 0.2em;
   box-shadow: 0.1em 0.1em 0.1em #999;
   border:solid 0.1em #282; 
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all 1.5s;
   border-radius:0;
   background: green;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display: block;
  text-decoration: none;
  text-align: left;
/*  width: 17%; */
  color: #fff;
  padding: 0.1em 0.2em;
  font-family: verdana;
  font-size:0.9em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover {
   background: #a0a;
}
#menu-accordeon li li:hover {
   margin: 0.1em;
   background: #a8a;
   font-weight: bold;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 0.2em 0.2em;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}
/* taille image logo accueil: si sa taille augmente, le cadre nav descend ! */
img.logo {
 margin-left: 20%;
 height: 5em;
 width: 5em;
}
/* taille image standard dans le menu remplaçant un texte */
img.menu {
 margin-left: 5%;
 height: 1.5em;
 width: 1.5em;
}
main {
display: table-cell;
height: auto;
width: 70em;
}

#nav {
display: block;
margin-left: 0.5%;
margin-top: 0;
width: 99%;
height: 5em;
border: 1px solid green; 
}

#rappel_categorie {
margin-top: 0;
margin-left:0.5em;
width:98.5%;
height:1.5em;
color: green;
background-color: white;
}

#aidebouton {
 margin-top: -2em;
 margin-left: 2em;
 font-size: 0.5em;
}

#aideimagette {
 clear: both;
 margin-top: -2.4em;
 margin-left: 2em;
 font-size: 0.5em;
 color: green;
 font-weight: normal;
}

#titre_media {
display:block; 
margin-top: 0.5%;
margin-left: 0.5%;
width: 99%;
border: 1px solid green; 
height: 2em;
}

#titre_media p {
 margin-top: 0.3em;
 font-size: 1em;
 font-weight: bold;
 color: green;

}

main media {
display:block;
margin:0.5%; 
padding: 1%;
border:1px green solid; 
height: 27em;
width: auto;
overflow: auto;
}

main media img {
 margin: auto;
 margin-left: 20%;
 height: 26.7em;
}

#legende_media {
display:block; 
margin-left: 0.5%;
width: 99%;
height: 2em;
border: 1px solid green; 
}

#legende_media p {
 margin-top: 0.3em;
 margin-left: 2em;
 font-size: 0.8em;
 color: green;
}

/* compteur de pages */
#pages_lues{
 background: #eee;
 color:#222;
 width: 11em; 
 margin-top: 1em;
 margin-left:-1.5em;
 padding: 0.2%;
 font-size: 0.7em;
 font-weight: normal;
 border: 0.1em #444 solid;
}

/* compteur de visiteurs */
#visiteurs{
 background: #eee;
 color:#222;
 width: 11em; 
 margin: 0.1%;
 margin-left: -1.5em;
 padding: 0.2%;
 font-size: 0.7em;
 font-weight: normal;
 border: 0.1em #444 solid;
}

/* survol mailto de contact */
.contact a:hover{
 color:green;
}
/* Recherche: couleur de surlignement pour recherche */
span {
 background-color: #0c0;
}

/* texte préformaté */
pre{
 overflow:auto ;
}

/* définition du div liste imagettes  */  
div.liste_imagette {
 float: left; 
 height: 27em; 
 width: 10%; /* partage avec media */
 margin-top: 7%;
 margin-left: 1%;
/* border:1px green solid; */
}
/* lien imagette */
a.imagette:hover{
 color: green;
 }

/* définition du div imagette  */  
img.imagette{
 border:0.1em #444 solid; 
 float: left;
 margin: 0.5%;
 padding: 0%;
 width: 44%;
 height: auto;
}

/* définition des flèches */
div.liste_fleche {
 height: 5em; 
 width: 96%;
 margin: 0 auto ; 
}

#bouton_f {
 position: relative;
 left: 1em; top: 0em;
 height: 1.3em; 
 border: 0;
 background-color: green;
}
#bouton_p {
 position: relative;
 top: 0em; 
 left: 5em;
 height:1.3em; 
 background-color: green;
}
#bouton_n {
 position: relative;
 top: 0em; left: 10em;
 height:1.3em;
 background-color: green;
}
#bouton_l {
 position: relative;
 top: 0em; left: 15em;
  height:1.3em; 
  border:0;
 background-color: green;
}
p.rappel_categorie {
 margin-top: 0.1em;
 font-size: medium;
 color: green;
 font-weight: bold;
}

/* définition du div zoom */ 
div.zoom {
 width:99.8%;
}
img.zoom{
 display:block;
 width: 90%;
 margin-top:2%; 
 margin-left:auto;
 margin-right:auto;
 margin-bottom:2%;
}

/* pages en construction */
p.construction {
 padding-top: 4em;
 font-size: 1.2em;
 text-align:center;
 color: maroon;
}
/* Gestion des petits écrans genre mobile */
@media screen and (max-width: 48em) {
main {
 position: absolute;
 margin-left:0;
 margin-top: 10%;
 width: auto; 
 height: auto;
 background-image: none; /* bandeau supérieur */
}
/*définition du div menu */
/*définition listes pour contact*/
li, li ul li{
 margin-top: 0.2em;
 margin-left: -2em;
 font-size: 1em;
 font-weight: normal;
 text-align:left;
 list-style:none;
}
#titre_media {
border: none; 
}
#legende_media {
border: none; 
}
div.liste_imagette {
 margin-top: 17%;
}
img.imagette{
 width: 70%;
}
main media img {
 margin: auto;
 margin-left: 0%;
 width: 22em;
}
/*définition champ recherche*/
div.critere {
 width: 100%;
 height: auto;
 border: 0.2em solid black;
}
p.critere input {
 width: 98%;
 font-size: 5em;
}

}