p.info {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
p.info span {
   display: none; /* on masque l'infobulle */
}
p.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
p.info:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;

   white-space: normal; /* on change la valeur de la propriété white-space pour
   qu'il n'y ait pas de retour à la ligne non-désiré */

   bottom: 159px; /* on positionne notre infobulle */
   left: 0px;
   background-image: url(image/photo/encadrement.jpg);
   background-repeat: repeat-y;
   /*a changer */
   padding: 3px;

   border-left: 0px solid green;
}

p.infoprinc {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
p.infoprinc span {
   display: none; /* on masque l'infobulle */
}
p.infoprinc:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
p.infoprinc:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;

   white-space: normal; /* on change la valeur de la propriété white-space pour
   qu'il n'y ait pas de retour à la ligne non-désiré */

   bottom: 309px; /* on positionne notre infobulle */
   left: 0px;
   background-image: url(image/photo/encadrement2.jpg);
   background-repeat: repeat-y;

    /*a changer */
   padding: 3px;

   border-left: 0px solid green;
}