table.planning {
    border-collapse:collapse;
    width: 100%;
    caption-side: top;
    background-color: #fff;
}

.planning th,
.planning td {
    border: 1px solid #ebebeb;
    padding: 5px;
    font-size: x-small;
    text-align: center;
    width: auto;
}

.planning .separateur {
    background-color: #ebebeb;
}
.planning th,
.planning .bureau {
    background: #7b6788;
    color: white;
    font-weight: bold;
    white-space: nowrap;
}
.planning a {
    text-decoration: none;
}

.planning td .resa {
   width: 100%;
   height: 100%;
}

.jour_ferie_ferme {
    background-color: #e9e9ed;;
}

.resa.current {
    background-color:white;
    opacity: 30%;
}

.planning caption {
    background-color:#fff;
    border-top-left-radius: .7rem;
    border-top-right-radius: .7rem;
}

.planning caption {
    padding: 14px;
    font-weight: bold;
}
.planning th.Sat,
.planning th.Sun {
    background-color: #b8d0b8;
}
.infobulle {
  position: relative;  
  cursor: help;
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
  content: attr(info-label); /* on affiche info-label */
  position: absolute;
  top: -1em;
  left: 80%;
  z-index: 1; /* 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;
  font-size: 0.8em;  
}