@-ms-viewport { width: device-width; }
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,200;0,400;0,600;1,200&display=swap');
date { pointer-events: none; }
date > a { text-decoration:none; color:inherit; }

body {
  padding-left: env(safe-area-inset-left); 
  padding-right: env(safe-area-inset-right); 
}

apropos {
  display:none;
}

#infobulle {
  position: absolute;
  left: 45%;
  z-index: 1000;
  top: 13px;
  display:none;
  width: 40%;
  text-align: left;
  animation: infobulle-apparition 0.3s linear;
  animation-iteration-count: 1;

}
bulle {
  padding: 6px;
  border: 2px solid #a0c7ff;
  background-color: #eee;
  border-radius: 6px;
  position: absolute;
  top:20px;
  max-width: 50%;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);
  color:#444;
}

#infobulle svg {
  height: 1em;
  opacity: 0.5;
  
}

#infobulle tail1 {
  display: block;
  width: 0;
  height: 0;
  border-color: transparent transparent #a0c7ff transparent;
  border-width: 10px;
  border-style:solid;
  position: absolute;
  left: 20px;
  z-index: 1999;
}

#infobulle tail2 {
  display: block;
  width: 0;
  height: 0;
  border-color: transparent transparent #eee transparent;
  border-width: 10px;
  border-style:solid;
  position: absolute;
  left: 20px;
  top:2px;
  z-index: 2000;
}

@keyframes infobulle-apparition {
	from {
    transform:translate(0,-50px);
    opacity:0;
	}
	to {
    transform:translate(0,0);
    opacity:1;
  }
}