body{
    text-align: justify;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background:wheat;
    font-size:180%;
}
.content{
    width:90%;
    padding:30px;
    margin:10px auto;
    background: rgb(246,238,225);
}
.brown{
    color:#6d6656;
}
.cadre-brown{
    background: rgb(208,191,168);
}
.cadre-brown-strong{
    padding:0 10px 0 80px;
    background: rgb(109,102, 86);
    border-radius: 30px 0px 30px 0px;
}
.cadre-green{
    background: rgb(204,222,162);
    padding:5px;
}

.cadre-green2{
    background: rgb(204,222,162);
    padding:5px;
    border-radius: 15px 15px 15px 15px ;
}


.cadre-green-strong{
    background: #307F2E;
    color:white;
    padding:5px 20px;
    border-radius: 15px 15px 15px 15px;
}
.green{
    color: rgb(85,120,55);
}
.title{
    font-size:20px;
    font-weight:bold;
    margin:10px 0;
}
.title-page{
    color:white;
    font-size: 40px;
    text-align: center;
    font-weight:bold
}
table{
    border: 1px black;
    margin:auto;
}
table tr td{
    text-align :justify;}

table tr th{
    background: rgb(208 191 168);
    color: #42413C;
    height: 40px;
    text-align: center;
}

table tr th .invisible{
    border: 1px solid rgb(246,238,225);
}

table.espace tr td ul li{
    text-align:justify;
    margin-bottom: 20px;
}

table .tableau{
    background: #1e7e34;
    color:black;
}

table.tableau tbody tr td{
    text-align: center;
}

table.tableau tbody tr td{
    border:1px solid black;
}

.succession{
    background: white;
    width:100%;
    display: inline-block;
    border-radius: 15px 15px 15px 15px ;
}

.white{
    background: white;
    padding:5px 20px;
    border-radius: 10px 10px 10px 10px;
    color: black;
}


.grey{
    background: #B2B2B2;
    padding:10px;
    margin:10px;
    color:white;
    border-radius: 15px 15px 15px 15px;
}

.little{
    height: 50px;
    width: 50px;
}


.light-green{
    background-color: rgb(165, 209, 82);
    border:1px solid black;
}

.light-light-green{
    background-color: beige;
    border:1px solid black;
}

.brown1{
    background-color: rgb(100, 78, 26);
}

.light-brown{
    background-color: #835d1b;
}

.light-light-brown{
    background-color: #a59784;
}

.cadre-green-strong table tr th table tr th{
    border: 1px solid black;
    color:white;
}

.cadre-green-strong table tr th table tr td{
    border: 1px solid black;
}

i {
    color:black;
}

.text-center{
    text-align: center;
}

.text-white{
    color:white;
    border:1px solid black;
}

.title-white{
    color:white;
    margin-bottom:15px;
}

.white ul li {
    list-style-type: square;
    color:rgb(109,102, 86);
}

.white .cadre-green2 ol li{
    list-style-type: square;
}

table.border tr th{
    border: 1px solid black;
    color:white;
}

table.border tr td{
    border: 1px solid black;
}

table tr td.invisible, table tr th.invisible{
    border:none;
}

.margin{
    padding-right:30px;
}

.image{
    max-width: 100%;
    max-height: 100%;
}

table tr td.red-border{
    border-right-color: #9d0000;
    border-right-width: 5px;
}

ul li{
    list-style-type: square;
}

.light-green, .light-light-green{
    text-align: center;
}

h3{
    color: white;
}

.fond-vert{
    color:lightgrey;
}

.diagramme{
    width: 100%;
}


/*************************/
/****** RESPONSIVE *******/
/*************************/

/**** IPAD MINI ****/
@media all and (max-width: 1025px) and (min-width: 0px) {
    .title{
        font-size:23px;
        font-weight:bold;
        margin:10px 0;
    }

    p, ul li{
        font-size: 18px;
    }

    table tr td{
        text-align :justify;
        font-size: 18px;
    }

    table tr td img{
        width:700px;
    }

    .grey p{
        font-size: large;
    }

    .levee{
        height: 450px;
    }
    .adventice{
        width: 350px;
    }

    .frequence{
        width: 650px;
    }

    .img_tableau{
        width:100%;
    }

}


/**** IPAD PRO PETIT ****/
@media (min-width: 1026px) {
    .title{
        font-size:25px;
        font-weight:bold;
        margin:10px 0;
    }

    p, ul li{
        font-size: 17px;
    }

    table tr td{
        text-align :justify;
        font-size: 17px;
    }

    .grey p, .grey{
        font-size: 17px;
    }

    .pdf{
        width:75px
    }

    .white table tr td p{
        font-size: 17px;
        text-align: justify;
        color:black;
        margin-left: 5px;
        margin-right: 40px;
    }

    .semis{
        width:100%;
    }

    .adaptation {
        width: 400px;
    }

    .courbe1{
        width: 500px;
    }
    .courbe2{
        width: 500px;
        height:336px;
    }

    .vulpin{
        width:700px;
        margin-right: 15%;
        margin-left: 15%;
    }
    .etouff_ecart{
        width:480px;
    }

    .plus_moins{
        width:90%;
    }
    .exemple{
        width: 80%;
    }

    .labour_courbe{
        width:500px;
    }
    .labour_graph{
        width: 450px;
    }

    .levee{
        height: 550px;
    }
    .adventice{
        width: 100%;
    }
    .frequence{
        width: 700px;
    }

    .img_tableau{
        width:100%;
    }

}

/**** IPAD PRO GRAND ****/
@media (min-width: 1500px) {
    .content {
        width: 95%;
    }
    .title{
        font-size:35px;
        font-weight:bold;
        margin:10px 0;
    }

    p{
        font-size: 1em;
    }

    ul li{
        font-size: x-large;
    }

    table tr td{
        text-align :justify;
        font-size: x-large;
    }

    table tr th{
        text-align: center;
        font-size: x-large;
    }

    .pdf{
        width:70px
    }

    i{
        font-size: 20px;
    }

    .grey p, .grey{
        font-size: 20px;
    }

    .small{
        font-size: x-large;
    }

    .courbe1{
        width: 650px;
    }
    .courbe2{
        width: 650px;
        height:430px;
    }

    .vulpin{
        width:900px;
        margin-right: 15%;
        margin-left: 15%;
    }

    .fond-vert{
        font-size: large;
    }

    .etouff_ecart, .labour_courbe{
        width:600px;
    }

    .plus_moins, .exemple{
        width:80%;
    }


    .white .cadre-green2 ol li, p, .white .cadre-green2 .cadre-green{
        font-size: 20px;
    }
    .labour_graph{
        width: 550px;
    }

    .levee{
        height: 600px;
    }

    .adventice{
        width: 700px;
    }
    .frequence{
        width: 950px;
    }

    .img_tableau{
        width:100%;
    }
}