@charset "UTF-8";

/* ----------------------- */
/* -- BANDEAU SITUATION -- */
/* ----------------------- */

div#bandeau_situation{
  display: block;
  position : relative;
  background: #ffffff;
  border : 1px solid #aaa;
  width : 767px;
  margin-right : auto;
  margin-left: auto;
  margin-bottom: 20px;
  border-radius : 5px;
  padding: 15px;
  text-align: center;
}
div#sous_bandeau_situation{
  display: flex;
  position: relative;
  width: 767px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 5px;
  text-align: center;
  gap: 10px;
}
div.cellule_situation{
  position: relative;
  width: 75px;
  height: 50px;
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.473) 0 7px 29px 0;
  text-align: center;
  font-size: 20px;
  transition: 300ms ease-in-out;
}
span.cellule_situation{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding: 0px 0px;
  font-size: 13px;
}
div.situation_passee{
  background-color: greenyellow;
}
div.situation_passee:hover{
  background-color: greenyellow;
  width: 150px;
}
div.situation_presente{
  background-color: lightblue;
  width: 150px;
  height: 30px;
  padding: 10px 0px;
}
div.situation_future{
  background-color: darkgray;
}
span.front, span.back {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: 0.5s all ease-in-out;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
span.front {
  z-index: 1000;
  transform: rotateX(0deg);
}
span.back {
  z-index: 900;
  transform: rotateX(-180deg);
}
div.situation_passee:hover span.front {
  width: 150px;
  z-index: 900;
  transform: rotateX(180deg);
}
div.situation_passee:hover span.back {
  width: 110px;
  z-index: 1000;
  transform: rotateX(0deg);
}