.cadre-image {
  position: relative;
/*   border: 2px solid #FFF; */
/*   box-shadow: 0 0 .5em #888; */
  max-inline-size: max-content;
  margin-inline: auto;
}
#img-fond {
  display: block;
  width: 100%;
  max-width: 60em;
}
area {
  cursor: pointer;
}
.img-disabled {
  filter: grayscale(.8);
}
#all-zones {
  display: none;
  pointer-events: none;
}
#all-zones.show-zones {
  display: block;
}
.zone {
  position: absolute;
  box-sizing: border-box;
 /*  border: 1px solid; */
  opacity: .75;
  background-color: currentColor;
}
#bleu  {border-color: #008; color: #DEF;}
#rouge {border-color: #800; color: #FDE;}
#vert  {border-color: #080; color: #EFD;}
#blanc {border-color: #888; color: #FFF;}
#jaune {border-color: #880; color: #FFA;}
#cyan  {border-color: #088; color: #AFF;}


dialog {position: fixed;top: 40%;left: 50%;margin: 0;padding: 1em 2em 0;min-width: 20em;border: 2px solid #1A4;text-align: center;box-shadow: 0 0 0.5em #000;transform: translate(-50%, -50%);}
dialog button {margin: .5em 0 .5em;padding: .5em 2em;border: 0;border-radius: 4px;text-shadow: none;font-size: inherit;outline-color: #6F9;outline-offset: 2px;color: #FFF;background-color: #1A4;background-image: none;box-shadow: 0 0 1em #888;transition: none;cursor: pointer;}
dialog button:not(:disabled):hover {color: #FFF;background-position: 0;}
dialog button:focus-within {outline: 2px solid #6F9;}

button:focus {outline: auto;outline-color:#06E}
#btn-showAll { min-width: 12em;}
#btn-showAll:before { content: "Voir";}
#btn-showAll.btn-on:before { content: "Masquer";}
#maj {margin: 0;margin-left: 1em;font-size: 0.8em;font-style: italic;color: #888;}