/****** Hexagone ******/
/* Grilles */
.hexagon {
    box-sizing: border-box;
    height: 200px;
    left: 50px;
    position:relative;
    width: 130px;
}

.hexagon-grid:hover {
    background: #F4F4F5;
}

.hexagon::before, .hexagon::after {
    border-bottom: 100px solid transparent; 
    border-top: 100px solid transparent;
    content:"";
    height: 0;
    position: absolute;
    top:0;
    width: 0; 
}

.hexagon::before {
    left:-50px;
}

.hexagon-grid:hover:before {
    border-right:50px solid #F4F4F5; 
}

.hexagon::after {
    right:-50px;
}

.hexagon-grid:hover:after {
    border-left:50px solid #F4F4F5; 
}

/* Grille - Objectifs */
.hex-row {
    clear: left;
}

.hex, .hex-done {
    float: left;
    margin-right: -40px; 
    margin-bottom: -80px; 
}

.hex:hover .hidden {
    display: block;
}

.hex .left, .hex-done .left {
    float: left;
    width: 0;
    border-right: 50px solid rgba(251, 146, 60, 0.5); 
    border-top: 87px solid transparent; 
    border-bottom: 87px solid transparent;
}

.hex-done .left {
    border-right: 50px solid #E26013;
}

.hex .middle, .hex-done .middle {
    float: left;
    width: 110px; 
    height: 176px; 
    background: rgba(251, 146, 60, 0.5);
    display: flex; 
    align-items: center;
    justify-content: center; 
    text-align: center; 
}

.hex .middle p {
    color: #744922 !important;
}

.hex-done .middle {
    background: #E26013;
}

.hex-done .middle p {
    color: white !important;
}

.hex .right, .hex-done .right {
    float: left;
    width: 0;
    border-left: 50px solid rgba(251, 146, 60, 0.5); 
    border-top: 87px solid transparent; 
    border-bottom: 87px solid transparent; 
}

.hex-done .right {
    border-left: 50px solid #E26013; 
}

.hex.even {
    margin-top: 90px; 
}