/* définition générales */
html,body{
 margin: 0px;		/* marge nulle autour des objets */
 padding: 0px;		/* padding nul */
 background-color: #eed; /* couleur générale de fond */
}

/* définitions du corps de page */
body{
 font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
 font-size: 100%;
}

/* définitions du paragraphe */
p{
 font-size: medium;
 margin-left: 15px;
 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{
}
/* pour les besoins de Cours Php */
p.error {
 color: red;
 font-weight: bold;
}
h3 {
 color: green;
 margin-left: 4%;
}
/* lien */
a {
 vertical-align: middle;
 text-decoration: none;
 font-weight: bold;
}
/* définition d'une ancre survolée */
a:hover{
 color: red;
}
/* définition d'une ancre visitée */
a:visited{
/* background: #cef; */
}
/* définition d'une ancre active */
a:active{
}

/*définition du div menu */
div.menu{
 float: left;
 height: 600px;
 width: 21%;
 margin-top: 85px;
 margin-left: 1%;
/* border: 1px solid green; */
}

/* définition du div d'une option menu (répété by class) dans la partie entête */
div.option{
 width: 100%;
 height: 33px;	/*pour espacer les options */
 padding: 0;
 border: none;
}

/* définition du lien d'une option menu */
.option a{
 font-size: medium; 				/* fixe police du lien */
 font-weight: bold;
 text-align: center; 		/* positionne le texte du lien */
 color: #244; 			/* couleur texte lien */
 display: block; 
 text-decoration: none; 	/* pas de soulignement du lien */
 margin: 0;
 padding: 2pt 0 2pt 0; 		/* espace le texte des bords du li */
}

/* définition du survol d'une option menu */    
.option a:hover{
 color: #f14;
 background: #ac8;
}
/* div d'une option menu image */
div.logo{
 margin-top: 5%;
 width: 99%;
/*	height:130px;	/*pour espacer les options */
/*   height:25%; */
 padding: 0;
 border: none;
 text-align: center; /* IE */
}
img.option {
 height: 100px;
 margin-left: auto; 
 margin-right: auto;
 border: 1px solid #ccc;
}
/* select de changement de langue */
select.langue {
 margin-top: 30px;
 margin-left: 40px;
}
/* définition du div de corps de page  */  
div.corps1, div.corps2, div.corps3 {
 background-image: url(../calsqysite/image/bandeau.png); /* bandeau supérieur */
 background-repeat: no-repeat; 
 float: left;
 width: 78%; 
 overflow: auto;
}

/* texte préformaté */
pre{
 overflow: auto ;
}
/* définition du div de pied de page  */
div.pied{
 background: #dcc;
 width: 98.5%;
 height: 60px;
 clear: both;
 border: 1px solid purple;
}
p.pied_texte{
 text-align: center;
 margin-left: 20px; 
 font-size: medium;
 color: #315
}
/* format images W3C validator */
img.valide {
 border: 0; width: 50px; height: 20px;
}

/* définition de la page accueil  */  
/* compteur de visiteurs */
div.visiteurs{
 background: #cef;
 display: inline;
 margin-left: 1%;
 padding: 1%;
 height: 3%;  
 font-weight: bold;
 border: thin #ccc solid;
}
/* compteur de pages */
div.pages_lues{
 background: #cef;
 display: inline;
 margin-left: 1%;
 padding: 1%;
 height: 3%;  
 font-weight: bold;
 border: thin #ccc solid;
}
/* cadre accueil */
div.accueil{
 height: 80%; width: 95%;
 margin-top: 7%; padding: 1%;
 border: thin solid white ;
 overflow: auto; 
}
/* texte accueil */
div.texte1{
 float: left;
 width: 98%; 
}
/* p de texte accueil  */  
p.texte1{
 display: inline;
 text-align: left ;
 font-size: 115%;
}
/* définition du div d'image accueil  */  
img.image1{
 display: block;
 float: right;
 margin-right: 2%;
 margin-top: 2%;
 width: 30%;
 border: double white;
}

/* p de défilant */
marquee{
 text-align: left;
 background-color: #fc4;
 color: red; /* #244; */
 font-size: 115%;
 font-weight: bold;
 margin-top: 1.5%;
 margin-bottom: 0.5%;	
}
/* Recherche: couleur se surlignement */
span {
 background-color: #5f5;
 color: red;
}
/*** définition de la page galerie ****/
/* définition du div liste imagettes  */  
div.liste_imagette{
 height: 0; 
 margin: 0 auto ; 
/* border: 1px green solid; */
 overflow: auto; 
}
/* lien imagette */
a.imagette:hover{
 }
/* définition du div imagette  */  
img.imagette{
 border: 1px green solid;
 float: left;
 margin: 5px;
 height: 75%;
}
/* définition du div cadre media  */  
div.cadre_media{
 height: auto; 
 margin-top: 85px;
/* border: 1px solid blue; */
 overflow: auto;
}
/* div texte ou image */  
div.media{
 border: 1px white solid; 
 height: 86%; 
 width: 98%;
 text-align: center;	/* IE */
}
/* définition du div titre image  */  
p.titre_media{
 font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
 font-size: 150%;
 font-weight: bold;
 color: #244;
 margin: 0 auto ; 
 text-align: center;
}
img.media {
 display: block;
 border: none;
 max-height: 400px; /*Gecko */
 max-width: 800px; /*Gecko */
 margin-top: 0.3%;
 margin-left: auto;
 margin-right: auto;
 height: 99%;
 text-align: left;  /* IE */
}
/* définition du div légende image non utilisé */  
p.legende_media {
 height: 0;
 font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
 font-size: 0%;
 margin: 0 auto ;
 text-align: center;
 }

img.galerie{ /* utilisé ?? */
 display: block;
 width: 200px;
 height: 200px;
}

div.aidelien4 {
 clear: both;
/* float:left; */
 margin-bottom: 2%;
 margin-left: 6%;
 font-size: 90%;
 color: #666; 
 }	

/* 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%;
}

/* définition date et heure dans titre */
span.date_texte {
 font-size: small;	
}

/* définition du div paragraphe  */  
p.paragraphe, p.texte {   /* changé */
 width: 90%; 
 font-size: medium;
 margin-left: 5%;
 margin-right: 5%;
 text-align: left;
}

/* pages en construction */
p.construction {
 background: #ff0;
 margin-left: 5%;
 margin-right: 5%;
 font-size: 150%;
 text-align: center;
}
/* Gestion des petits écrans genre mobile */
@media screen and (max-width: 768px) {
 body {
  width: 100%;
  background-color: #fff;
  font-size: 90%;
 }
 div.menu {
  float: left;
  width: 100%;
  margin:0;
  height: auto;
  padding: 7px;
 }
 div.option{
  width: 98%;
  height: auto;
  text-align: justify;
  margin-top: 1%; margin-bottom: 1%;
  border: none;
 }
/* définition du lien d'une option menu */
.option a{
 font-size: 80%; 		/* fixe police du lien */
 font-weight: bold;
 text-align: center; 		/* positionne le texte du lien */
 color: #244; 			/* couleur texte lien */
 display: block; 
 text-decoration: none; 	/* pas de soulignement du lien */
 margin: 0;
 padding: 2pt 0 2pt 0; 		/* espace le texte des bords du li */
}
/* définition du div de corps de page  */  
div.corps1, div.corps2, div.corps3 {
 background-size: contain;
 float: left;
 width: 100%; 
 overflow: auto;
}
h3 {
 color: green;
 margin-left: 0%;
 font-size: 100%;
}
p,p.paragraphe,p.texte{
 font-size: 90%;
}
a{
 font-size: 90%;
 padding-top: 2%;
}
p.titre_media{
 font-size: 120%;
}
/* définition du div de pied de page  */
 div.pied {
 width:100%;
 height:auto;
 margin: 0;
 border: none;
 padding: 0;
 }
 p.pied_texte{
/* display: inline; */
 margin-left: 1%; 
 margin-top: -3%;
 font-size: 60%;
 color:#315
 }
/* cacher les images et liens du pied */
 img.valide {
  width: 0%;
  height: 0%;
 }

}