/* ========================================================= positionnement des éléments de la page */

/*temporaire le temps de mettre l'anim des pages de garde*/
.pagedegarde {
    margin-top: .5em;
    grid-column: 1/span 12;
    grid-row: 1;
}

/*=========================================================== partie filtre */

.choix {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    grid-row: 2;
    grid-column: 1/span 12;
    margin-bottom: 4vw;

}

/*=========================================================== partie herbier */

.herbier {
    grid-row: 4;
    grid-column: 4/span 4;
    z-index: 2;
    height: 100vh;
    width: 20vw;
}

.herbier img {
    position: absolute;
    max-height: 100vh;
    max-width: 40vw;
    z-index: 1;
}
.herbier img:hover{
    z-index: 2;
}

.vu {
    filter: grayscale(100%);
    pointer-events: none;
}

/*=========================================================== partie info plantes */



.info {
    position: absolute;
    grid-column: 6/span 6;
    grid-row: 3;
    background-color: var(--jaune);
    z-index: 4;
    padding: 2em;
}

.croix {
    position: absolute;
    display: block;
    right: 6vh;
    top: 2vh;
    font-size: 2em;
    cursor: pointer;
}

.croix::before {
    content: '✖';
    top: -0.4em;
    left: 0.06em;
    position: relative;
}

.range {
    position: relative;
    grid-row: 4;
    height: 50px;
    width: 100px;
    background-color: var(--jaune);
    display: inline-flex;
    padding-bottom: 1rem;
}

.range h1,
.range p,
.range ul {
    display: none;
}