.bac{
    background: rgba(22, 184, 78, 0.6);
    min-height: 40vh;
    display: grid;
}

.bac-tous{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.card{
    background-image: linear-gradient(0deg, rgba(24, 77, 110, 0.9), rgba(2, 240, 248, 0.9));
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); 
    height: 370px;
    width: 270px;
    
}
.title{
    text-align: center;
    font-size: 1.2em;
    font-weight: 1000;
}

.nom-cuve{
    display: flex;
    flex-direction: row;
    /*color: #9ba2ac;*/
    font-size: 1.2em;
    font-weight: 500;
    
}
.temperature{
    width: 150px;
    height: 50px;/*height: 100px;*/
}
.reading{
    display: grid;
    text-align:center;
    line-height : 55px;
    font-size: 2em;
    font-weight: 700;
    /*color: #3e8b51;
    color: #9e3e4f;*/
}
.card_suiv_eau{
    display: flex;
    height: 50px;
    width: 120px;
}
.infos{
    width: 60px;
    font-size: 0.5em;
    text-align:center;
}
.compteur{
    width: 78px;
    font-size: 0.5em;
    text-align: center;
}
.reading1{
    font-size: 3.5em;
    text-align: center;
    
}
.reading2{
    font-size: 2.4em;
    text-align: center;
    line-height : 40px;
}
.reading3{
    display: grid;
    text-align:center;
    line-height : 20px;
    font-size: 2em;
    font-weight: 500;
}
.reading4{
    display: grid;
    text-align:center;
    line-height : 60px;
    font-size: 4em;
    font-weight: 700;
    color: rgb(13, 71, 62)
}
.cycle{
    display: flex;
    height: 50px;
    font-weight: bolder;
    /*border-bottom: 1px solid rgb(95, 243, 248);*/
}
.volume{
    width: 135px;
    text-align: center;
    font-size: 0.8em;
    line-height : 25px;
    color: rgb(2, 33, 100);
}

.nutriment{
    text-align: center;
    font-weight: bolder;
    color: rgb(1, 255, 86);
    border-top: 1px solid rgb(95, 243, 248);
}

.npk{
    display: flex;
    height: 100px;
    justify-content: space-around;
}
.fiche{
    width: 84px;
    color: rgb(2, 80, 32);
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    border-radius: 8px 0 8px 0;
}
.azote{
    background-image: linear-gradient(0deg, rgba(112, 231, 94, 0.897), rgba(218, 245, 62, 0.7));
}
.phosphore{
    background-image: linear-gradient(0deg, rgba(19, 184, 156, 0.9), rgba(83, 245, 62, 0.7));
}
.potassium{
    background-image: linear-gradient(0deg, rgba(112, 231, 94, 0.9), rgba(218, 245, 62, 0.7));
}

.time{
    text-align: center;
    height: 15px;
    font-size: 0.8em;
    color: rgb(203, 206, 204);
}

.coul_BackGROUND{
    background: rgb(24, 77, 110);
}
.couleur_TITRE{
    color: #50B8B4;
}
.couleur_STANDARD{
    color: rgb(119, 156, 179);
}
.couleur_NRJ{
    color: rgb(221, 233, 113);
}
.couleur_EAU{
    color: rgb(175, 221, 252);
}

@media screen and (max-width: 1500px) {
    section{
        padding: 10px 10px;
    }
    /*.bac{*/
    .bac-tous{    
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-evenly;
        align-items: center;
        
    }
    .card{
        margin: 0px 0px 5px;
    }

}
@media screen and (max-width: 1000px) {
    .bac{
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center; 
        padding: 5px;
    }
    .card{
        margin: 5px
    }   
}