h1{
    text-align: center;
    color: #067302;
}



.green{
    background-color: #a5d1a96b;
}

.grad{
    background: linear-gradient(to top, #fff, #a5d1a96b);
}


#A, #B, #C, #D{
    width: 75%;
    margin: auto;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

/*
#A_titre{
    color: #27322B;
    font-size: 28px;
}*/


#A ul{
    width: 100%;
    margin: auto;
    margin-top: 4vh;
    position: relative;
}

#A li{
    font-size: 18px;
    margin-top: 3vh;
    margin-left: 10%;
    width: 70%;
    background-color: #fff;
    list-style-type: none;
    padding: 1vh;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;

}
#A li::before{
    content: '✔';
    color: #992621;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 1vh;
}

#A p{
    width: 90%;
    margin: auto;
}




#B{
    margin-top: 5vh;
    margin-bottom: 5vh;
    padding: 4vh;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
/*
#B_titre{
    
    color: #fff;
    background-color: #27322B;
}*/



#B_p{
    width: 90%;
    margin: auto;
}

#B_grid{
    margin-top: 5vh;
    text-align: center;
    display: grid;
    grid-template-areas:
                    ". a ."
                    "b c g"
                    ". c ."
                    "d c e"
                    ". f .";
    counter-reset: p;
    row-gap: 3vh;
}

#B_grid p{
    font-size: 18px;
}

#B_grid p::before{
    counter-increment: p;
    content: counter(p);
    font-size: 1.25em;
    line-height: 0.75;
    width: 1.5rem;
    padding: 1vh;
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    margin-right: 1vh;
    text-align: center;
    color: #27322B;
    background-color: #a5d1a9;
    border-radius: 50%;
}

#B_a{
    grid-area: a;
}
#B_b{
    grid-area:b;
}
#shake{
    grid-area: c;
    margin: auto;
    height: 160px;
}
#B_d{
    grid-area: d;
}
#B_e{
    grid-area: e;
}
#B_f{
    grid-area: f;
}
#B_g{
    grid-area: g;
}

/*
#C_big_titre{
    color: #fff;
    background-color: #27322B;
}*/



#C_grid{
    width: 80%;
    margin: auto;
    margin-top: 5vh;
    display: grid;
    grid-template-columns: 1fr 2fr;

}


#C_titre{
    text-align: center;
    color: #992621;
    font-size: 22px;
}

#balance{
    display: flex;
    margin: auto;
    height: 185px;
}

#C_liste li{
    text-align: justify;
    list-style-type: none;
    font-size: 18px;
    color: #27322B;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.3) 0px 8px 24px;
    padding: 0.5vh;
    margin-bottom: 2vh;
    padding-left: 3vh;
}


#C_liste li::before{
    content: '✔';
    color: #992621;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 1vh;
}


#C div{
    text-align: center;
}


#D{
    border-bottom: none;
}

/*
#D_titre{
    color: #fff;
    background-color: #27322B;
}*/


#D ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

#D li{
    font-size: 18px;
    margin-top: 3vh;
    width: 80%;
    background-color: #fff;
    list-style-type: none;
    padding: 1vh;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

#D li::before{
    content: '';
    background-image: url('./images/puce_vert.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-flex;
    margin-left: 5px;
    margin-right: 10px;
    width: 13px;
    height: 13px;
}

@media screen and (max-width: 640px){
    body{
        width: 100%;
        padding: 0;
        border-radius: 0px;
        font-size: 14px;
        text-align: justify;
    }

    h2{
        font-size: 18px;
        padding: 0.5vh;
    }

    #A li{
        font-size: 15px;
        margin-left: -15%;
        width: 100%;
    }
    #B_grid{
        text-align: justify;
        grid-template-areas: 
                        "c"
                        "a"
                        "b"
                        "g"
                        "d"
                        "e"
                        "f";
        row-gap: 0.5vh;
    }
    #B_grid p{
        font-size: 15px;
        
    }
    #B_grid p::before{
        font-size: 15px;
        width: 1.5rem;
        padding: 1vh;
        padding-left: 1.5vh;
        padding-right: 1.5vh;
        margin-right: 1vh;
        text-align: center;
        color: #27322B;
        background-color: #a5d1a9;
        border-radius: 50%;
    }

    #C_grid{
        grid-template-columns:1fr;
        width: 100%;
    }

    #C_grid ul{
        margin-left: -20%;
    }
    #C_grid p{
        font-size: 16px;
    }

    #C_liste li{
        width: 100%;
        font-size: 15px;
        text-align: left;
    }

    #D ul{
        margin-left: -20%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    #D li{
        width: 100%;
        font-size: 15px;
    }

    #D p{
        font-size: 17px;
    }
}