:root {
  --bs-border-color: var(--bs-gray-500);    /* Pour les bordures des champs de formulaire */
}

.dropdown-item.active, 
.dropdown-item:active {
    background-color: #343a40 !important;
    color: white !important;
}

.btn-outline-secondary {
  --bs-btn-border-color: var(--bs-gray-500);    /* Pour les bordures des boutons show/hide */
}


body {
    font-family: 'Expletus Sans', sans-serif !important;
    background-color: rgb(235, 235, 235);
    position: relative;
    background: #fff;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#main_container {
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#main_container .row:first-of-type {
    justify-content: center;
}

h2 {
    /* color: #c10d0d; */
    margin: 50px 0;
    text-align: center;
    font-weight: 700;
}

h3 {
    color: #D9D9D9;
    font-size: calc(0.75rem + .6vw);
}

h4 {
    color: #7D7461;
    font-size: 16px
}

.background-grey {
    background: #d9d9d9;
}

#home-icon {
    color: var(--bs-gray-700);            /* couleur de l’icône (sombre) */
    border-color: var(--bs-gray-700);     /* bordure sombre */
    transition: all .25s ease;
    transform: scale(1);    /* état normal */
    border-style: solid;
}

#home-icon:hover {
    color: var(--bs-gray-600);            /* icône éclaircie */
    border-color: var(--bs-gray-600);     /* bordure éclaircie */
    transform: scale(1.08); /* zoom léger au survol */
}


/* Header navbar */

/* .navbar-item,
.navbar-item a {
    color: white;
    text-decoration: none;
} */

.cart-icon {
    height: 25px;
    padding-left: 20px;
}


/* Carousel */

#carouselExampleCaptions {
    width: 100%;
    height: auto;
    /*background-size: cover;
      background-position: center;*/
}

.carousel-item img {
    width: 100%;
    height: 628px;
}


/* Account Menu */

.account-item {
    background-color: #ffcc80;
    padding: 70px;
    text-decoration: none;
}

.account-item a {
    text-transform: uppercase;
    font-size: 14px;
    color: black;
    font-weight: bold;
}


/* Buttons styles */

.btn-brown {
    color: white;
    height: 35px;
    background: #7d7461;
    border-radius: 10px;
    padding: 5px 20px;
    /*box-shadow: 0px 3px 14px rgba(51, 51, 51, 0.25);*/
}

.btn {
    padding: 5px 10px;
}

.account-item a:hover {
    color: #d50000;
    text-decoration: none;
}


/* Main content */

main {
    min-height: 100%;
    position: relative;
    margin: 2em;
    label.required:before {
        content: "* ";
        color: #d50000;
    }
    padding-top: 2rem;
    .disabled-tab {
        pointer-events: none;
        opacity: 0.5;
    }
    .error-color {
        color: #DD3444;
    }
    .disabled-field {
        pointer-events: none;
        background-color: #E9ECEF;
    }
}


/* Footer*/

footer {
    bottom: 0;
    /* on le colle en bas */
    width: 100%;
    height: auto;
}

footer p {
    color: #D9D9D9;
    font-size: 14px;
}

footer a {
    text-decoration: none;
    color: #D9D9D9;
    font-size: 14px;
}

footer a:hover {
    text-decoration: none;
    color: #7D7461;
}

footer article {
    margin-left: auto;
    margin-right: auto;
}

.button-account {
    color: #909393;
    background-color: #212529;
}

.button-account:hover {
    background-color: #212529;
    border: #212529;
}

/* .dropdown-dark {
    background-color: #212529;
}

.dropdown-dark a:hover {
    background-color: grey;
    color: black;
} */

.btn-arrow {
    color: white;
    background: none;
    border: none;
    font-size: 50px;
    display: block;
}

.btn-arrow:hover {
    color: #7D7461;
    background: none;
    border: none;
    font-size: 50px;
    display: block;
}


/* Style de base pour tous les messages flash */

.alert {
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
}


/* Style pour le message flash de succès */

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}


/* Style pour le message flash d'erreur */

.alert-error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}


/* Style pour le message flash d'information */

.alert-info {
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;
}


/* Style pour le message flash d'avertissement */

.alert-warning {
    background-color: #fcf8e3;
    border-color: #faf2cc;
    color: #8a6d3b;
}