body > corps
{
	height:100%;  font-family: 'Optima', cursive;
	/* sans-serif; 
	font-family: 'Palatino', cursive; 
	font-family: 'Apple Chancery', cursive; 
	font-family: 'Bookman Old Style', serif;	Comic Sans MS */
	font-size:small; /* small normal large */
	color:#000;   background-color:#fff;
	margin:15px 8px 0 0;    padding:0;
}

.flotte {float:left;} 

h1,h2 { text-align: center; color: white; font-family: 'Tangerine', cursive; }
	/*  font-family: 'Festive', cursive; */
	/*font-size:xx-large   font-family: 'Optima', cursive; */
h1 { font-size:200%} 
h2 { font-size:160%}
h3 { font-size:120%} 

tangerine { font-size:100%; font-family: 'Tangerine', cursive; }
 h2, h3 { text-align: center; color: black; font-family: 'Optima', cursive; } /* 'Comic Sans MS', cursive; font-family: 'Apple Chancery' , cursive ; */
 
form { color: #777; }



a[href*="#"] {color: #000064; text-decoration: underline;} /* 006400 */ 

 
 a:hover	{ color: solid white; text-decoration: none;	}			/* blanc */
 a:active, a:focus { color:  white; text-decoration: none;}
 a:link		{ color: white ; text-decoration: none; } 
 a:visited	{ color: white; text-decoration: none; }

/* span { color: #220000; text-decoration: none; } */

.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  color: green; /* font-weight: bold; */
  cursor: help;
}
/* on génère un élément :after lors du survol et du focus :*/
.infobulle:hover::after,
.infobulle:focus::after {
  content: attr(aria-label);  /* on affiche aria-label zone texte */
  position: absolute;
  color: black ; font-weight: bold; background-color: yellow;
  top: +1.5em;  left: 80%; width:500px; 
  transform: translateX(-50%); /* on centre horizontalement  */
 /*  z-index: 1;  pour s'afficher au dessus des éléments en position relative */
  /*white-space: nowrap;  /* on interdit le retour à la ligne */
}

DIV.centrage_verticale {	/* desactivation	verticale au lieu de vertical */
	margin-top: 30vh;  /* poussé de la moitié de hauteur de viewport */
	transform: translateY(-50%);  /* tiré de la moitié de sa propre hauteur 
 version 2 */
	min-height: 10em;
	display: table-cell;
	vertical-align: middle 
/* version 2
   display: inline-block;
   vertical-align: middle;*/
}

/* 	 wprock.fr 	*/
.img-zoom-hover .img-zoom {
    overflow: hidden;
    position: relative; 
}
.img-zoom-hover .img-zoom img {
    max-width: 125%;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}
.img-zoom-hover .img-zoom * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.img-zoom-hover:hover .img-zoom img {
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}

.zoom1 img {width:150px;height:150px;opacity:90%}
.zoom1 img:hover {width:150px;height:150px;opacity:99%}
.zoom2 img {width:190px;height:190px;}
.zoom2 img:hover {width:195px;height:195px;}
/*.zoom {height:400px;}*/
/*.zoom p {text-align:center;}*/
.zoom img {width:200; height:150;} 
.zoom img:hover {width:200px;height:140px;}

/* Opacité images */
 .opac {    opacity: 0.7;
    filter: alpha(opacity=50);    transition: opacity 1s;
    -moz-transition: opacity 1s;    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;    -htm-transition: opacity 1s;      }

  .opac:hover {    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);    transition: opacity 1s;
    -moz-transition: opacity 1s;    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;    -htm-transition: opacity 1s;     }
/* Fin opacité image */

img { border-radius: 10px; vertical-align:middle; text-align:middle } /* vertical-align:middle; text-align:middle }*/
.flotte {float:left;} /* Peut servir pour aligner texte avec image */


TABLE,TD,TH { border-radius: 10px;}

hr {  margin-left: 0;  margin-right: 0;} /* Pourquoi ? Pour le footer */

#corps {  margin: 10px; padding: 10px; color: black;} 

p  {  margin: 16px; padding: 0px; } 
br {  margin:  2px; padding: 0px; } /* 4,0 */
/* table {  margin: 0px; padding: 0px; } /* influe sur hauteur du footer   */

blanc	{ color: #FFF; }
gris	{ color: #777; }
noir	{ color: black;}
rouge	{ color: red;}
vert	{ color:  #050;} 
bleu	{ color: #1E90FF;}
marron	{ color: #D2691E; }
jaune	{ color: #DAA520; }
petit	{ font-size: x-small; }

strong	{ border: 1px solid blue;}

inv	{background-color: gray; color: white; }

kbd	{background-color: gray;	color: white;	border-radius: 5px;	padding: 1px 2px 0;  border: 1px solid black;}
kbd2	{background-color: gray;	color: white;	border-radius: 5px;	padding: 1px 2px 0;  border: 1px solid black; cursor: grab;}
kgris	{background-color: #ddd;	color: #777;	border-radius: 5px;	padding: 1px 2px 0;  border: 1px solid #888;}
kbleu	{background-color: #1E90FF;	color: white;	border-radius: 5px;	padding: 1px 2px 0;  border: 1px solid black;}
kblanc	{background-color: #FFF;	color: #000;	border-radius: 5px;	padding: 1px 2px 0;  border: 1px solid grey;}

.encadrer { border: 1px solid black; padding: 6px; } 

.centrer	{  text-align: center;	}
.gauche 	{  text-align: left;	}
.droit  	{  text-align: right;	}

loc { position: absolute;  bottom: 60px; text-align: center; }

blink
 {
  -webkit-animation: 2s linear infinite condemed_blink_effect; // pour Safari 4.0-8.0
  animation: 2s linear infinite condemed_blink_effect;
}
@-webkit-keyframes condemed_blink_effect { // pour Safari 4.0-8.0
  0% {     visibility: hidden;   }
  50% {    visibility: hidden;  }
  100% {    visibility: visible;  }
}
@keyframes condemed_blink_effect 
{
  0% {    visibility: hidden;  }
  50% {    visibility: hidden;  }
  100% {    visibility: visible;  }
}
/* Ecrit un texte sur une image 
		<div class="contenant">
			<img src="Images/agenda.png" width=140 height=140>
			<div class="texte_centrer">
				<script>window.onload = date_S("date-heure");</script>
			</div>
		</div>
	*/
.contenant {
  position: relative;
  text-align: center;
  color: red;
}

.texte_centrer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}