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

h3{
    width: fit-content;
    margin: auto;
    border-bottom: 2px solid #992621;
}


.green{
    background-color: #a5d1a96b;
    padding-bottom: 3vh;
    padding-top: 3vh;
}

.grad{
    background: linear-gradient(#fff, #a5d1a96b);
    padding-bottom: 5vh;
}

#intro{
    width: 70%;
    margin: auto;
    margin-top: 5vh;
    text-align: center;
    background-color:#fff;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    border-radius: 15px;
    padding: 2vh;
    margin-bottom: 5vh;
}


#A{
    width: 65%;
    margin: auto;
    margin-top: 3vh;
    margin-bottom: 3vh;
    padding: 2vh;
}


#A ul{
    position: relative;
    /*margin-top: 8vh;*/
}


#A li{
    list-style: none;
    padding: 1vh;
    font-size: 18px;
    margin-bottom: 2vh;
    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, #B li, #C li, #D li{
    list-style: none;
}

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

#truck{
    display: flex;
    margin: auto;
    width: 142px;
}

#B{
    width: 90%;
    margin: auto;
    margin-bottom: 10vh;
}


#B_grid, #D_grid{
    width: 90%;
    margin: auto;
    display: grid;
    /*grid-template-columns: 1fr 1fr;
    column-gap: 5vh;*/
    grid-template-areas: 
                    "a a ."
                    ". b b";
    row-gap: 2vh;
}

#B_a{
    grid-area: a;
}

#B_b{
    grid-area: b;
}


#B_grid{
    margin-top: 7vh;
}

#B ul{
    margin:auto;
    /*border-radius: 15px;*/
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    padding: 2vh;
    background-color: #fff;
}

#B li{
    font-size: 17px;
    padding: 1vh;
}


#C{
    width: 60%;
    margin: auto;
    margin-bottom: 8vh;
}

#grue{
    display: flex;
    margin: auto;
    width: 213px;
}


#C ul{
    /*position: relative;*/
    margin-top: 5vh;
}


#C li{
    padding: 1vh;
    font-size: 18px;
    /*margin-left: 4%;*/
    margin-bottom: 2vh;
    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;
    background-color: #fff;
}

#D{
    width: 70%;
    margin: auto;
    margin-bottom: 8vh;
}

#D ul{
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    padding: 2vh;

}

#D_a{
    grid-area: b;
}
#D_b{
    grid-area: a;
}

#D li{
    padding: 1vh;
}




@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;
    }

    #intro{
        width: 85%;
    }

    #A, #C{
        width: 90%;
    }

    #A li, #C li{
        margin-left: -10%;
        font-size: 15px;
    }

    #B_grid, #D_grid{
        width: 90%;
        margin: auto;
        grid-template-areas: 
                        "a"
                        "b";
        row-gap: 2vh;
    }

    #B li, #D li{
        font-size: 15px;
    }

    #D{
        width: 90%;
    }




}