body{
    background-color: #7AB2D3;
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow-x: hidden;
}

a{
    text-decoration: none;
}


.barreg{
    display: flex;
    float: left;
    border-bottom: 6px solid black;
    width: 20%;
    margin-top: 3vw;
    margin-left: 8vw;
}
.barred{
    font-family: kanit;
    display: flex;
    float: right;
    width: 20%;
    margin-top: 3vw;
    margin-left: 8vw;
    margin-right: -3vw;
    font-size: 300%;
}
/* en cours de developement */
#box {
    width: 78vw;
    height: 5vh;
    border: 1px solid #999;
    background-color: #9dbdcd;
    font-size: 170%;
    margin-top: 12vh;
    position: absolute;
    left: 11vw;
    text-align: center;
    color: #000000;
    border-radius: 10px;
    -moz-box-shadow: 3px 3px 12px #000000;
    -webkit-box-shadow: 3px 3px 12px #000000;
    box-shadow:3px 3px 12px #000000;
}
.content{
    display: none;
}
.grille {
    max-width: 2560px;
    width: 85vw;
    padding-top: 12vh;
    padding-bottom: 12vh;
    margin: 50px auto;
    /* border: 1px solid #333; */
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    justify-content: center;
    grid-gap: 50px;
}
.grid-item {
    width: 400px;
    height: 300px;
    background: #333;
    /* ombres */
    border-radius: 10px;
    box-shadow:6px 6px 12px #5e6337;
}
.grid-item a img {
    width: 400px;
    height: 300px;
    background: #333;
    border-radius: 10px;
    -moz-box-shadow: 2px 5px 20px #000000;
    -webkit-box-shadow: 2px 5px 20px #000000;
    box-shadow:2px 5px 20px #000000;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.grid-item a img:hover {
    transform: scale(1.22);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.h1 {
    font-family: kanit;
    display: flex;
    font-size: 250%;
    /* color: #757953; */
    justify-content: left;
    align-items: center;
    padding-top: 45vh;
    z-index: auto;
}

/* Pied de page */
footer {
    font-family: Kanit;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
}