#image_map {

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

}

#repere {

position: fixed; right: 200px; left: 200px; clear: none; top: -80pt;

}

.picto-item {

  display: block;*inline-flex;

  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= 100;

}



#p1 {top: 387px;left:382px;position: relative;}

#p2 {top: 120px;left:360px;position: relative;}

#p22 {top: -370px;left: 410px;position: relative;}

#p3 {top: 180px;left: 510px;position: relative;}

#p4 {top: 300px;left: 445px;position: relative;}

#p5 {top: 200px;left: 633px;position: relative;}



#p6 {top: 215px;left: 770px;position: relative;}

#p7 {top: 30px;left: 260px;position: relative;}

#p8 {top: 45px;left: 320px;position: relative;}

#p9 {top: 180px;left: 770px;position: relative;}

#p10 {top: 100px;left: 830px;position: relative;}

#p11 {top: -40px;left: 780px;position: relative;}

#p12 {top: -100px;left: 375px;position: relative;}

* #p13 {top: -130px;left: 500px;position: relative;}

#p14 {top: -170px;left: 590px;position: relative;}

#p15 {top: 105px;left: 730px;position: relative;}

#p16 {top: -170px;left: 600px;position: relative;}

#p17 {top: -135px;left: 380px;position: relative;}

#p18 {top: -230px;left: 730px;position: relative;}

#p19 {top: -280px;left: 830px;position: relative;}

#p20 {top: -300px;left: 650px;position: relative;}

#p21 {top: -265px;left: 430px;position: relative;}

#p23 {top: -200px;left: 480px;position: relative;}

#p24 {top: -90px;left: 810px;position: relative;}

#p25 {top: -100px;left: 490px;position: relative;}



#pc1 {top: 285px;left: 490px;position: relative;}

#pc2 {top: 410px;left: 550px;position: relative;}

#pr1 {top: 440px;left: 500px;position: relative;}



/* 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: -70px;*-2.4em;

  left: -10px;*-50%;

	transform: translateX(-50%); /* on centre horizontalement  */

  z-index: 100; /* pour s'afficher au dessus des éléments en position relative */

  white-space: nowrap;  /* on interdit le retour à la ligne*/

  padding: 5px 14px;

  background: #413219;

  color: #fff;

  border-radius: 4px;

  font-size: 1.2rem;

}



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



[aria-label]:hover:before,

[aria-label]:focus:before {

*display: block;

  content: "\25bc";

  position: relative;

 	top: -45px;*-1em;

	left: 5px;

	transform: translateX(-50%); /* on centre horizontalement  */

  	font-size: 20px;

  	color: red;

 z-index: 100;

}



/* pas de contour durant le :focus */

[aria-label]:focus {

  outline: none;

}