* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lustria", serif;
}

/*----- Style navbar -----*/

.white{
    background-color: #FFFF;
}

.container-fluid{
    justify-content: center !important;
}

/*----- Style hover navbar -----*/

.nav-link-custom:hover {
    color: #5E3A20 !important;
}

.nav-link-custom::before {
    transition: 1150ms;
    height: 1px;
    content: "";
    position: absolute;
    background-color: #876647;
}

.nav-link-ltr::before {
    width: 0%;
    bottom: 10px;
}
  
.nav-link-ltr:hover::before {
    width: 84%;
}

/*----- Style titre -----*/

.titre_principal, .titre-secondary, .titre-tertiary{
    color: #5E3A20;
}

/*----- Style lien navbar -----*/

.nav-link-custom{
    color: #876647;
    position: relative;
}

.lien-drop{
    color: #876647 !important;
}

.lien-drop:hover{
    background-color: #876647 !important;
    color: white !important;
}

/*----- Style lien contact-----*/

.header-contact{
    margin-bottom: 6rem !important;
    background-color: #D39456;
}

.lien-contact {
    color: white;
}

.header-contact:hover{
    background-color: #5E3A20;
}

/*----- Style Product -----*/

.btn-product{
    background-color: #D39456 !important;
}

.btn-product:hover{
    background-color: #5E3A20 !important;
}

/*----- Style text -----*/

.text-description{
    color: #5E3A20;
    text-align: justify;
}

/*----- Style page product -----*/

.color-product{
    background-color: #F8992F;
}

.btn-product-small {
    max-width: 150px;
    width: 100%;
}

.filter{
    background-color: #F8992F50;
    height: fit-content;
}

/*----- Style contact ------*/

.h-textarea{
    height: 450px;
}

/*----- Style footer -----*/

.footer-style{
    background-color: #F8992F;
}

.titre-footer, .lien-footer {
    color : black !important;
}

.logo-news{
    width: 10%;
}

.btn-footer{
    background-color: #5E3A20 !important;
}

/*----- graphique css ----*/
canvas {
  max-width: 600px;
  background: white;
  padding: 1rem;
  border-radius: 12px;
}

/*----- Responsive Navbar ------*/

@media screen and (max-width: 1024px) {

    .contact-responsive{
        color: #5E3A20 !important;
    }

    li{
        padding: 0 2% !important;
    }

    .nav-link-custom:hover{
        background-color: #876647;
        color: white !important;
    }

    .nav-link-custom::before{
        height: 0px;
    }
}

@media screen and (max-width: 576px) {

    .titre_principal{
        font-size: medium !important;
    }

    .navbar-brand {
        width: 10% !important;
    }
}