.hexagon {
    --a:500px;
    width: var(--a);
    height: var(--a);
    background-color: lightblue;
    display: inline-block;
    margin: 2px;
    position: relative;
    z-index: 1;
    background:linear-gradient(60deg,#4978c1,#6faa6a);
    --b:calc(0.1 * var(--a));
    clip-path:polygon(50% 0,-50% 50%,50% 100%,150% 50%,50% 0,
    50% var(--b));
    padding: calc(0.20 * var(--a)) calc(0.05 * var(--a));
  }

  #div_ss_saxia_suivi:hover {
    width: 100vw;
    clip-path:None;
    z-index:100;
}
#div_saxia_calendar:hover {
    clip-path:None;
    z-index:100;
}

.odd-row {
    --a:500px;
    margin-top:calc(-0.25 * var(--a));
    margin-bottom: calc(-0.24 * var(--a));
  }
.odd-row-first {
    --a:500px;
    margin-top:calc(-0.25 * var(--a));
    margin-bottom:calc(-0.24 * var(--a));
    margin-left:calc(0.50 * var(--a));
  }