*{
 
    font-family : system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


nav{
    margin-top: 8px;
    width: 100%;
    height : 65px;
    margin: 0px auto 40px auto;
    background-color: #A50166;
    position: sticky;
    text-align: center;
}

nav ul{
    list-style-type: none;
}

nav li{
    float: left;
    width: 15%;/*100% divisé par le nombre d'éléments de menu*/
    text-align: center;/*Centre le texte dans les éléments de menu*/
}

/*Evite que le menu n'ait une hauteur nulle*/
nav ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: block; /*Toute la surface sera cliquable*/
    text-decoration: none;
    color: white;
    border-bottom: 2px solid transparent;/*Evite le décalage des éléments sous le menu à cause de la bordure en :hover*/
    padding: 5px 0px;/*Agrandit le menu et espace la bordure du texte*/
}

nav a:hover{
    color: orange;
    border-bottom: 2px solid gold;
}

.site {
    position: relative;
    right: -1700px;
    width: 50px;
    
}
.containeur{
    display: flex;
    justify-content: flex-end;
}

.menuimage{
    flex : 1;
    display: flex;
    gap:13px;
    margin-left: 1550px;
    
}
.taille{
width: 40px;

}

.menu{
    width: 1850px;
    background-color: #A50166;
    text-align: center;
    margin-top: 80px;
    margin-left : -1310px;
}

#logo{
    position: relative;
    bottom : -45px;
    width: 1400px;
}

.fourchette{
    width: 25%;
}

#barcherche {
    position: relative;
    bottom:110px;
    left: 450px;
    

}
#button {
    background-color:#A50166;
    color: white;
}
#miam{
    position: relative;
    bottom: 50px;
    left: 180px;
}
.imgsoupe{
    position: relative;
    margin-left: -1310px  ;
    margin-top: -40px;
    width: 100px;
    height: 210px;
} 
.BorderText1{
    position: relative;
    top :-570px;
    background-color: #A50166;
    width: 300px;
    height: 540px;
    left : 1150px;
    text-align: center;
    color: black;
}
.BorderText2{
    position: relative;
    top :-1130px;
    background-color:  #3864b4;
    width:300px;
    height: 540px;
    left : 1550px;
    text-align: center;
    color: black;
}
.BigBorder{
    position: relative;
    top: -1100px;
    background-color: #A50166;
    width: 1850px;
    height: 50px;
    color:white;
}

.Bordurenoir{
    position: relative;
    background-color: black;
    width: 100%;
    left: 0px;
    bottom: 100px;
    text-decoration-color: black;
}
#seconnecter{
    position: relative;
    margin-top: -180px ;
    margin-left: 1340px;
    width: 24px;
}
#createaccount{
    position: relative;
    margin-top: -180px;
    margin-left: 150px;
    width: 24px;
    

}
#posterrecette{
    position: relative;
    margin-top: -110px;
    margin-left: 1340px;
    width: 50px;
}
.bouton_de_connexion {
    display: flex;
    gap: 50px;
}
.sansgras{
    font-weight: lighter;
}

.marmelade{
position: relative;
margin-left: -1310px ;
margin-top: 475px;
width: 580px;
}
#marmelade2{
    background-color: #aad500 ;
    width: 580px;
    height: 230px;
    margin-left: -1310px;
    margin-top : -30px ;
    
}
.pommedeterre{
    position: relative;
    width: 580px;
    margin-left: -695px;
    top : -534px;
}

#pommedeterre2{
background-color: #4299c7 ;
width: 580px;
height: 230px;
margin-left: -695px;
margin-top : -559px ;
}
.GirollePaysanne{
    position: relative;
    width: 580px;
    margin-left: -80px;
    top : -534px;
}
#GirollePaysanne2{
    background-color: #A50166 ;
    width: 580px;
    height: 230px;
    margin-left: -80px;
    margin-top : -560px ;
    }

    .gens1{
        width: 80px;
        margin-left: -1300px;
        margin-top: 10px;
    }
    #textgens1{
        background-color: white;
        border: #DBD5D4 solid 2px;
        text-align: start;
        width: 577px;
        height: 100px;
        margin-left: -1310px;
        margin-top : -97px ;
    }
    .gens2{
        width: 80px;
        margin-left: -685px;
        margin-top: -250px;
    }
    #textgens2{
        background-color: white;
        border: #DBD5D4 solid 2px;
        text-align: start;
        width: 577px;
        height: 100px;
        margin-left: -696px;
        margin-top : -127px ;
    }
    .gens3{
        width: 80px;
        margin-left: -65px;

        margin-top: -280px;

    }
    #textgens3{
        background-color: white;
        border: #DBD5D4 solid 2px;
        text-align: start;
        width: 577px;
        height: 100px;
        margin-left: -80px;
        margin-top : -119px ;
    }
    .BigBorderBlack{
        position: relative;
        top: 70px;
        left: -1320px;
        background-color: #000000;
        width: 1840px;
        height: 200px;
        color:white;
    }
    .BigBorderWhite{
        position: relative;
        top: 70px;
        left: -1320px;
        background-color: #ffffff;
        width: 1840px;
        height: 28px;
        color:white;
    }
    
    .tableau-style {
        border-collapse: collapse;
        min-width: 600px;
        width:  auto;
        border: 1px solid black;
        margin: 5px auto; 
    }
    
    .theadtr{
        background-color: #f79646;
        text-align: left;
    }
    
    th, td{
        padding: 15px 20px;
    }
    
    tbody tr, td, th{
        border: 2px solid black ;
    }