#image_map {
poverflow: scroll; 
position: fixed; right: 200px; left: 200px; 
clear: none; 
width: auto;

}
#repere {
position: fixed; right: 200px; left: 200px; clear: none; top: 50px;
}
.picto-item {
  display: block;
   justify-content: center;
  align-items: center;
  *margin: 0.2em;
  width: 0.6em;
  height: 0.6em;
  color: #413219;
  background: yellow;
  font-size: 3rem;
  text-align: center;
  text-decoration: none;
* position: fixed;
 border-radius: 50%;
top:0px;
left:0px;
zindex= 1000;
cursor: pointer;
}


#p1 {top: 430px;left:382px;position: absolute;}
#p1b {top: 430px;left:332px;position: absolute;}
#p2 {top: 220px;left:360px;position: absolute;}
#p22 {top: 220px;left: 410px;position: absolute;}
#p3 {top: 310px;left: 520px;position: absolute;}
#p4 {top: 420px;left: 445px;position: absolute;}
#p5 {top: 370px;left: 633px;position: absolute;}

#p6 {top: 420px;left: 770px;position: absolute;}
#p7 {top: 280px;left: 260px;position: absolute;}
#p8 {top: 335px;left: 300px;position: absolute;}
#p9 {top: 490px;left: 770px;position: absolute;}

#p10 {top: 420px;left: 830px;position: absolute;}
#p11 {top: 310px;left: 780px;position: absolute;}
#p32 {top: 310px;left: 820px;position: absolute;}
#p12 {top: 290px;left: 395px;position: absolute;}
#p13 {top: -130px;left: 500px;position: absolute;} 
#p14 {top: 260px;left: 550px;position: absolute;}
#p14b {top: 260px;left: 650px;position: absolute;}

#p15 {top: 560px;left: 730px;position: absolute;}
#p16 {top: 300px;left: 610px;position: absolute;}
#p17 {top: 370px;left: 360px;position: absolute;}
#p18 {top: 310px;left: 730px;position: absolute;}

/* #p20 {top: 270px;left: 650px;position: absolute;} */
#p21 {top: -265px;left: 430px;position: absolute;}
 /* #p23 {top: 420px;left: 480px;position: absolute;} */
#p24 {top: 560px;left: 810px;position: absolute;}
#p25 {top: 570px;left: 490px;position: absolute;}
/* #p26 {top: 300px;left: 960px;position: absolute;} */
#p27 {top: 440px;left: 880px;position: absolute;}

#p28 {top: 220px;left: 600px;position: absolute;}
#p29 {top: 210px;left: 940px;position: absolute;}
#p30 {top: 490px;left: 710px;position: absolute;}
#p31 {top: 450px;left: 710px;position: absolute;}
#pc2 {top: 420px;left: 940px;position: absolute;}
/* on génère un élément :after lors du survol et du focus :*/

 .picto-item:hover:after, .picto-item:focus:after {
   content: attr(aria-label);  /* on affiche aria-label */
  position: relative;
  top: -2.4em;
  left: -50%;
  transform: translateX(-50%);
  z-index: 1000;
 white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #413219;
  color: #fff;
  border-radius: 4px;
  font-size: 1.2rem;
*display: inline-block; width: 200px;
}
#p27 .picto-item:hover:after, .picto-item:focus:after {
   content: attr(aria-label);  /* on affiche aria-label */
  position: relative;
  top: -2.4em;
  left: -50%;
  transform: translateX(-50%);
  z-index: 1000;
 white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #413219;
  color: #fff;
  border-radius: 4px;
  font-size: 1.2rem;
*width: 200px;
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before, [aria-label]:focus:before {

  content: "\25bc";
  position: relative;
 	top: -1em;
	left: -0%;
	transform: translateX(-50%); /* on centre horizontalement  */
  	font-size: 20px;
  	color: red;
 z-index: 1000;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;

}