/*
* ---------------------------------------------------
*  Grille
* ---------------------------------------------------
*/

.grille{
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    width:100vw;
    height:500vh;
    /* grille */
    display:grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap:20px;
    
    display:none;
}

.grille .colonne{
    height:100%;
    background-color:darksalmon;
    opacity:0.6;
}

/* Ligne de base */
.grille-ligne-base{
    position:fixed;
    z-index:-2;
    top:0;
    left:0;
    width:100vw;
    height:500vh;
    /* grille */
    display:grid;
    grid-template-rows: repeat(80, 1.87vw);
}

.grille-ligne-base .ligne{
    position: relative;
    line-height:calc(1.87vw);
    height:calc(1.87vw);
    overflow:hidden;
    opacity:0.4;
}

.grille-ligne-base .ligne:nth-child(even) {background: red}
.grille-ligne-base .ligne:nth-child(odd) {background: blue}


.grille-ligne-base .ligne span{
    position:absolute;
    bottom:-1px;
    border-bottom:1px solid pink;
    display:block;
    height:1px;
    width:100%;
}