body {
    background-color: #fefae0;
    margin : 0px;
}

/* header */

.en-tete {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    color: #283618;
    background-color: #fefae0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

a{
    color:black;
    text-decoration: none;
}

#slogan {
    font-size: 2.2em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: -90px;
}

#logo {
    width : 150px;
    height: auto;
    margin-left: 40px;
}

.onglet {
    display: flex;
    justify-content: space-between;
    width: 400px;
    margin-right: 30px;
    text-decoration: underline;
    font-size: 1.4em;
    margin-right: 80px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* reste */

.banniere {
    display: flex;
    justify-content: left;
    align-items: end;
    height: 600px;
    background: linear-gradient(to left,#394e39,#588157 );
}

#design {
    display: flex;
    height: 500px;
    width: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 200px;
    border-radius: 50px;
}

#banniere-titre {
    margin-left: 90px;
    margin-bottom: 90px;
    color : #fefae0;
    font-size: 6em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#titre {
    font-size: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
    height: 150px;
    background-color: #283618;
    color: #fefae0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.produit {
    display: flex;
    justify-content: space-around;
    height: 1020px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(52, 120, 60);
    margin-bottom: 50px;
}

.produit-meuble {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #fefae0, #ecb87c);
    border-radius: 50px;

}

.produit-image {
    border-radius: 50px;
    padding: 10px;
    width: 450px;
    margin-top: 10px;
}

.produit-acheter {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-around;
    background-color: #fefae0;
    border-radius: 30px;
    padding: 10px;
}

.produit-acheter button {
    background-color: #555C47;
    color: #fefae0;
    border: 0px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.2em;
    border-radius: 20px;
}

.produit-prix {
    display: flex;
    font-size: 2em;
}

#description {
    text-align: center;
    font-size: 1.1em;
    width: 400px;
    height: 300px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* footer */

/* footer */
.fin {
    background-color: #588157;
    color: #fefae0;
    padding: 30px 0;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.marque {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 1.4em;
}

.marque img {
    width: 120px;
    height: auto;
}

.fin p {
    font-size: 1.1em;
    margin-top: 10px;
}

@media (max-width: 1024px) {
    .en-tete {
        flex-direction: column;
        text-align: center;
    }

    .onglet {
        flex-direction: column;
        width: auto;
        margin: 0;
    }

    #slogan {
        font-size: 1.8em;
        margin-left: 0;
    }

    #banniere-titre {
        font-size: 4em;
        margin: 0;
    }

    .produit {
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .produit-meuble {
        width: 400px;
    }

    .produit-image {
        width: 350px;
    }
}

@media screen and (min-width: 1270px) and (max-width: 1300px) {
    body {
        background-color: #fefae0;
        margin: 0px;
    }
    
    /* header */
    
    .en-tete {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        color: #283618;
        background-color: #fefae0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
    
    #slogan {
        font-size: 1.93em; /* 2.2 * 0.876 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin-left: -79px; /* -90 * 0.876 */
    }
    
    #logo {
        width: 131px; /* 150 * 0.876 */
        height: auto;
        margin-left: 35px; /* 40 * 0.876 */
    }
    
    .onglet {
        display: flex;
        justify-content: space-between;
        width: 350px; /* 400 * 0.876 */
        margin-right: 26px; /* 30 * 0.876 */
        text-decoration: underline;
        font-size: 1.23em; /* 1.4 * 0.876 */
        margin-right: 70px; /* 80 * 0.876 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    /* reste */
    
    .banniere {
        display: flex;
        justify-content: left;
        align-items: end;
        height: 526px; /* 600 * 0.876 */
        background: linear-gradient(to left, #394e39, #588157);
    }
    
    #design {
        display: flex;
        height: 438px; /* 500 * 0.876 */
        width: auto;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: 175px; /* 200 * 0.876 */
        border-radius: 44px; /* 50 * 0.876 */
    }
    
    #banniere-titre {
        margin-left: 79px; /* 90 * 0.876 */
        margin-bottom: 79px; /* 90 * 0.876 */
        color: #fefae0;
        font-size: 5.26em; /* 6 * 0.876 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    #titre {
        font-size: 4.38em; /* 5 * 0.876 */
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 0px;
        height: 131px; /* 150 * 0.876 */
        background-color: #283618;
        color: #fefae0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .produit {
        display: flex;
        justify-content: space-around;
        height: 893px; /* 1020 * 0.876 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(52, 120, 60);
        margin-bottom: 44px; /* 50 * 0.876 */
    }
    
    .produit-meuble {
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom, #fefae0, #ecb87c);
        border-radius: 44px; /* 50 * 0.876 */
    }
    
    .produit-image {
        border-radius: 44px; /* 50 * 0.876 */
        padding: 9px; /* 10 * 0.876 */
        width: 394px; /* 450 * 0.876 */
        margin-top: 9px; /* 10 * 0.876 */
    }
    
    .produit-acheter {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-around;
        background-color: #fefae0;
        border-radius: 26px; /* 30 * 0.876 */
        padding: 9px; /* 10 * 0.876 */
    }
    
    .produit-acheter button {
        background-color: #555C47;
        color: #fefae0;
        border: 0px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 1.05em; /* 1.2 * 0.876 */
        border-radius: 17px; /* 20 * 0.876 */
    }
    
    .produit-prix {
        display: flex;
        font-size: 1.75em; /* 2 * 0.876 */
    }
    
    #description {
        text-align: center;
        font-size: 0.96em; /* 1.1 * 0.876 */
        width: 350px; /* 400 * 0.876 */
        height: 263px; /* 300 * 0.876 */
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* footer */
    
    .fin {
        background-color: #588157;
        color: #fefae0;
        padding: 26px 0; /* 30 * 0.876 */
        text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .marque {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 13px; /* 15 * 0.876 */
        font-size: 1.23em; /* 1.4 * 0.876 */
    }
    
    .marque img {
        width: 105px; /* 120 * 0.876 */
        height: auto;
    }
    
    .fin p {
        font-size: 0.96em; /* 1.1 * 0.876 */
        margin-top: 9px; /* 10 * 0.876 */
    }
    
}

@media (max-width: 768px) {
    .en-tete {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    #logo {
        width: 100px;
        margin: 0;
    }

    #slogan {
        font-size: 1.6em;
        text-align: center;
    }

    .onglet {
        flex-direction: column;
        text-align: center;
        font-size: 1.2em;
    }

    .banniere {
        flex-direction: column;
        height: 400px;
    }

    #banniere-titre {
        font-size: 3em;
        margin: 20px 0;
    }

    .produit {
        flex-direction: column;
        height: auto;
    }

    .produit-meuble {
        width: 400px;
    }

    .produit-image {
        width: 250px;
    }

    .produit-acheter button {
        font-size: 1em;
    }

    #description {
        width: 100%;
        padding: 10px;
    }

    .fin {
        font-size: 0.9em;
        padding: 20px 0;
    }
}

@media (max-width: 1024px) {
    .en-tete {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    #slogan {
        font-size: 1.8em;
        margin-left: 0;
    }

    .onglet {
        width: auto;
        font-size: 1.2em;
        flex-direction: column;
    }

    .banniere {
        padding: 0 30px;
        height: 300px;
    }

    #banniere-titre {
        font-size: 5em;
        margin-bottom: 15px;
    }

    #titre {
        font-size: 2.5em;
        margin-top: 30px;
    }

    #description {
        width: 80%;
    }

    .flyer-image {
        width: 90%;
    }

    audio {
        width: 250px;
    }

    .produit-meuble {
        width: 400px;
    }
}

@media screen and (min-width : 1910px) {
    body {
        background-color: #fefae0;
        margin: 0px;
    }
    
    /* header */
    
    .en-tete {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        color: #283618;
        background-color: #fefae0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
    
    #slogan {
        font-size: 2.91em; /* 2.2 * 1.324 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin-left: -119px; /* -90 * 1.324 */
    }
    
    #logo {
        width: 199px; /* 150 * 1.324 */
        height: auto;
        margin-left: 53px; /* 40 * 1.324 */
    }
    
    .onglet {
        display: flex;
        justify-content: space-between;
        width: 530px; /* 400 * 1.324 */
        margin-right: 40px; /* 30 * 1.324 */
        text-decoration: underline;
        font-size: 1.85em; /* 1.4 * 1.324 */
        margin-right: 106px; /* 80 * 1.324 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    /* reste */
    
    .banniere {
        display: flex;
        justify-content: left;
        align-items: end;
        height: 794px; /* 600 * 1.324 */
        background: linear-gradient(to left, #394e39, #588157);
    }
    
    #design {
        display: flex;
        height: 662px; /* 500 * 1.324 */
        width: auto;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: 265px; /* 200 * 1.324 */
        border-radius: 66px; /* 50 * 1.324 */
    }
    
    #banniere-titre {
        margin-left: 119px; /* 90 * 1.324 */
        margin-bottom: 119px; /* 90 * 1.324 */
        color: #fefae0;
        font-size: 7.94em; /* 6 * 1.324 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    #titre {
        font-size: 6.62em; /* 5 * 1.324 */
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 0px;
        height: 199px; /* 150 * 1.324 */
        background-color: #283618;
        color: #fefae0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .produit {
        display: flex;
        justify-content: space-around;
        height: 1351px; /* 1020 * 1.324 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(52, 120, 60);
        margin-bottom: 66px; /* 50 * 1.324 */
    }
    
    .produit-meuble {
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom, #fefae0, #ecb87c);
        border-radius: 66px; /* 50 * 1.324 */
    }
    
    .produit-image {
        border-radius: 66px; /* 50 * 1.324 */
        padding: 13px; /* 10 * 1.324 */
        width: 596px; /* 450 * 1.324 */
        margin-top: 13px; /* 10 * 1.324 */
    }
    
    .produit-acheter {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-around;
        background-color: #fefae0;
        border-radius: 40px; /* 30 * 1.324 */
        padding: 13px; /* 10 * 1.324 */
    }
    
    .produit-acheter button {
        background-color: #555C47;
        color: #fefae0;
        border: 0px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 1.59em; /* 1.2 * 1.324 */
        border-radius: 26px; /* 20 * 1.324 */
    }
    
    .produit-prix {
        display: flex;
        font-size: 2.65em; /* 2 * 1.324 */
    }
    
    #description {
        text-align: center;
        font-size: 1.46em; /* 1.1 * 1.324 */
        width: 530px; /* 400 * 1.324 */
        height: 397px; /* 300 * 1.324 */
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* footer */
    
    .fin {
        background-color: #588157;
        color: #fefae0;
        padding: 40px 0; /* 30 * 1.324 */
        text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .marque {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px; /* 15 * 1.324 */
        font-size: 1.85em; /* 1.4 * 1.324 */
    }
    
    .marque img {
        width: 159px;
        height: auto;
    }
    
    .fin p {
        font-size: 1.46em;
        margin-top: 13px;
    
}

}

@media screen and (min-width : 2550px) {
    body {
        background-color: #fefae0;
        margin: 0px;
    }
    
    /* header */
    
    .en-tete {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        color: #283618;
        background-color: #fefae0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
    
    #slogan {
        font-size: 3.89em; /* 2.2 * 1.766 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin-left: -159px; /* -90 * 1.766 */
    }
    
    #logo {
        width: 265px; /* 150 * 1.766 */
        height: auto;
        margin-left: 71px; /* 40 * 1.766 */
    }
    
    .onglet {
        display: flex;
        justify-content: space-between;
        width: 706px; /* 400 * 1.766 */
        margin-right: 53px; /* 30 * 1.766 */
        text-decoration: underline;
        font-size: 2.47em; /* 1.4 * 1.766 */
        margin-right: 141px; /* 80 * 1.766 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    /* reste */
    
    .banniere {
        display: flex;
        justify-content: left;
        align-items: end;
        height: 1059px; /* 600 * 1.766 */
        background: linear-gradient(to left, #394e39, #588157);
    }
    
    #design {
        display: flex;
        height: 883px; /* 500 * 1.766 */
        width: auto;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: 353px; /* 200 * 1.766 */
        border-radius: 88px; /* 50 * 1.766 */
    }
    
    #banniere-titre {
        margin-left: 159px; /* 90 * 1.766 */
        margin-bottom: 159px; /* 90 * 1.766 */
        color: #fefae0;
        font-size: 10.6em; /* 6 * 1.766 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    #titre {
        font-size: 8.83em; /* 5 * 1.766 */
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 0px;
        height: 265px; /* 150 * 1.766 */
        background-color: #283618;
        color: #fefae0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .produit {
        display: flex;
        justify-content: space-around;
        height: 1802px; /* 1020 * 1.766 */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(52, 120, 60);
        margin-bottom: 88px; /* 50 * 1.766 */
    }
    
    .produit-meuble {
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom, #fefae0, #ecb87c);
        border-radius: 88px; /* 50 * 1.766 */
    }
    
    .produit-image {
        border-radius: 88px; /* 50 * 1.766 */
        padding: 18px; /* 10 * 1.766 */
        width: 795px; /* 450 * 1.766 */
        margin-top: 18px; /* 10 * 1.766 */
    }
    
    .produit-acheter {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-around;
        background-color: #fefae0;
        border-radius: 53px; /* 30 * 1.766 */
        padding: 18px; /* 10 * 1.766 */
    }
    
    .produit-acheter button {
        background-color: #555C47;
        color: #fefae0;
        border: 0px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 2.12em; /* 1.2 * 1.766 */
        border-radius: 35px; /* 20 * 1.766 */
    }
    
    .produit-prix {
        display: flex;
        font-size: 3.53em; /* 2 * 1.766 */
    }
    
    #description {
        text-align: center;
        font-size: 1.94em; /* 1.1 * 1.766 */
        width: 706px; /* 400 * 1.766 */
        height: 530px; /* 300 * 1.766 */
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* footer */
    
    .fin {
        background-color: #588157;
        color: #fefae0;
        padding: 53px 0; /* 30 * 1.766 */
        text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .marque {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 26px; /* 15 * 1.766 */
        font-size: 2.47em; /* 1.4 * 1.766 */
    }
    
    .marque img {
        width: 212px; /* 120 * 1.766 */
        height: auto;
    }
    
    .fin p {
        font-size: 1.94em; /* 1.1 * 1.766 */
        margin-top: 18px; /* 10 * 1.766 */
    }
    

}