i{
    color: black;
}
.dessus{
    display: flex;
    justify-content:center;
}

.dessus a{
    margin-left: 30%;
    margin-right: 30%;
    font-size: 20px;
    font-weight: 5px;
    font-style: italic;
    text-decoration: none;
    color: black;
}
header{
    display: flex;
    justify-content: space-between;
    background-color: #FD7C7C ;
    align-items: center;
    padding: 15px;

}

.logo{
    display: flex;
    justify-content:flex-start;
}
.dessusdroite{
    display: flex;
    justify-content:flex-end;
}

body{
    background-color: rgba(255,145,77,65%) ;
    margin: 0;
}
a:hover{
   color: white;
}
nav{  
    padding-bottom: 10px;
}
section{
    flex: 1;            
    padding: 20px;
}
.listeProduits{
    display: flex;
    flex-wrap: wrap;
    padding-left: 100px;
}
.prod {
    display: flex;
    font-size: medium;
    font-style: italic;
    justify-content: center;
    margin-top: 15px;
    border: 1px  solid  #FD7C7C; border-radius: 8px;
    background-color: #FD7C7C;
    width: 148px;
    color: black;
    text-decoration: none;
}
.produit{
    display: flex;
    align-content:center;
    flex-direction: column;
}
.slogan {
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    margin-top: 50px;
    font-size: xx-large;
    font-style: oblique;
}
.descript {
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    margin-top: 30px;
    font-style: italic;
    width: 50%;
}
.propo{
    display: grid;
    position: absolute;
    grid-template-columns:  50px 50px 50px 50px 50px 50px 50px 50px ;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px ;
    padding-left: 800px;
    transform: translateY(-250px);

}  

.propo img{
    grid-column: 3 / 7;
    grid-row: 2 / 8;
}
.propo p{
    padding-left: 50px;
    grid-column: 3 / 7 ;
    grid-row: 1 / 2 ;
}
#i10 {
    grid-column: 1 / 2 ;
    grid-row: 8 / 9 ;
    justify-content: space-between;
}
#i11 {
    grid-column: 2 / 3 ;
    grid-row: 8 / 9 ;
}
#i12{
    grid-column: 3 / 4 ;
    grid-row: 8 / 9 ;
}
#i13{
    grid-column: 4 / 5 ;
    grid-row: 8 / 9 ;
}
#i14{
    grid-column: 5 / 6 ;
    grid-row: 8 / 9 ;
}
#i15{
    grid-column: 6 / 7 ;
    grid-row: 8 / 9 ;
}
#i16{
    grid-column: 7 / 8 ;
    grid-row: 8 / 9 ;
}
.propo i{
    padding-left: 42px;
}
.propo a{
    grid-column: 3 / 7 ;
    grid-row: 9 / 10 ;
    padding-left: 25px;
}
.connex {
    display: flex;
    background-color: #545454 ;
    border-radius: 15px;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    width: 40%;
    height: 40%;
    margin-top: 3em;
    position: absolute;

}
#i60 {
    color: white;
    border: 2px solid black;
    border-radius: 50px;
    height: 35px;
    background-color: white;
    grid-column: 3 / 7 ;
    grid-row: 3 / 4 ;
}
#i61 {
    border: 2px solid black;
    border-radius: 50px;
    height: 35px;
    grid-column: 3 / 7 ;
    grid-row: 6 / 7 ;
}
#i62 {
    grid-column: 3 / 7 ;
    grid-row: 8 / 9 ;
}
#b50 {
    border: 2px solid black;
    border-radius: 50px;
    height: 35px;
    width: 100px;
    grid-column: 3 / 7 ;
    grid-row: 9 / 10 ;
}
#z1 {
    grid-column: 2 / 8 ;
    grid-row: 10 / 11 ;
    display: flex;
    justify-content: center;
}
.coco {
    display: grid;
    margin-left: 30%;
    margin-right: 30%;
    grid-template-columns:  500px ;
    grid-template-rows: 500px;
}
#pp1 {
    color: white;
}
#pp2 {
    color: white;
}
.TabProd{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}
.Prod{
    margin: 5em;
    padding: 2em;
}
.imgprod{
    border-radius: 15px;
    background-size: cover;
    border: #FD7C7C solid 3px;
}
.secprod {
    display: grid;
    grid-template-columns:  50px 50px 50px 50px 50px ;
    grid-template-rows: 50px 50px 50px 50px 50px ;
    border: #FD7C7C solid 3px ;
    border-radius: 15px;
    font-style: italic;
    background-color: #FD7C7C ;
}
.secprod p{
    justify-content: center;
    display: flex;
}