/* Dark mode styles based on system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --custom-primary-color: #16A085;
        --custom-secondary-color: var(--custom-white);
        --custom-tertiary-color: rgba(22, 160, 133, 0.1);
        --custom-primary-shadow-color: rgba(22, 160, 133, 0.7);
        --custom-secondary-shadow-color: rgba(22, 160, 133, 0.075);
        --custom-white: white;
        --custom-dark-bg-color: rgba(25, 37, 69);
        --custom-text-flash-color: #2E2D2C;
        --custom-dark-secondary-color: #2E2D2C;
        /* --custom-card-height : 29rem; */
        --custom-card-width : 13rem;
        font-family: 'Avenir', sans-serif !important;   
    }
    body {
        background-color: var(--custom-dark-bg-color);
        color: var(--custom-secondary-color);
    }
    .modal-content {
        background-color: var(--custom-dark-bg-color) !important;
    }
    .modal-body {
        color:var(--custom-dark-secondary-color) !important;
    }
    .card-body {
        background-color: var(--custom-dark-bg-color) !important;
    }
    .card-footer {
        background-color: var(--custom-dark-bg-color) !important;
    }
    .card-header {
        background-color: var(--custom-dark-bg-color) !important;
    }
    .card:hover {
        border-color: var(--custom-primary-color) !important;
        box-shadow: 
            inset 3px 3px var(--custom-secondary-shadow-color), 
            3px 3px 3px var(--custom-primary-shadow-color) !important;
        border-width: 1px !important;
        .card-header {
            color: var(--custom-secondary-color) !important;
        }
        .card-footer {
            color: var(--custom-dark-secondary-color) !important;
        }
        .card-title {
            color: var(--custom-white) !important;
        }
        .card-header, .card-footer {
            background-color: var(--custom-primary-color) !important;
        }
        .link-underline-light {
            --bs-link-underline-opacity: 0 !important;
        }
    }
    .bg-light {
        --bs-bg-opacity: 0 !important;
    }
    .link-underline-light {
        --bs-link-underline-opacity: 0 !important;
    }
    .link-underline-dark {
        --bs-link-underline-opacity: 0 !important;
    }
    .dropdown-item {
        color : var(--custom-dark-secondary-color) !important;
    }
    .footer {
        background-color: var(--custom-tertiary-color);
    }
    .btn:hover {
        background-color: var(--custom-primary-color) !important;
    }
    .btn-zoom {
        color: var(--custom-white) !important;
        background-color: var(--custom-dark-bg-color) !important;
    }
    #recherche_produit_search:hover {
        color: var(--custom-white) !important;
        background-color : var(--custom-primary-color) !important;
    }
    .navbar-toggler {
        background-color: var(--custom-white) !important;
    }
  }
  @media (min-width: 1440px) {
    .custom-form-search-width {
        width: 400px;
    }
    .article-RSE {
        font-size: 15px;
    }
}
@media (min-width: 1600px) {
    .custom-offset-xxl {
        margin-left: 6.67%;
    }
    .custom-form-search-width {
        width: 500px;
    }
    .article-RSE {
        font-size: 15px;
    }
}
@media (min-width: 1800px) {
    .custom-offset-xxl {
        margin-left: 16.67%;
    }
    .custom-form-search-width {
        width: 500px;
    }
    .article-RSE {
        font-size: 15px;
    }
}
@media (min-width: 2030px) {
    .card{
        width : 15rem !important;
    }
    .custom-offset-xxl {
        margin-left: 21.67%;
    }
    .custom-form-search-width {
        width: 600px;
    }
    .img-bandeau {
        width: 100%;
        max-width: 100%;
        height : auto;
    }
    /* Image produit */
    .img-produit {
        /* aspect-ratio: 0.9; */
        width: 550px;
        height: auto;
        object-fit: cover;
    }
}
@media (min-width: 2560px) {
    /* Image produit */
    .img-produit {
        /* aspect-ratio: 0.9; */
        width: 650px;
        height: auto;
        object-fit: cover;
    }
}
@media (min-width: 3440px) {
    .card{
        width : 17rem !important;
    }
    .custom-offset-xxl {
        margin-left: 26.67%;
    }
    .custom-form-search-width {
        width: 700px;
    }
    /* Image produit */
    .img-produit {
        /* aspect-ratio: 0.9; */
        width: 750px;
        height: auto;
        object-fit: cover;
    }
}
@media (max-width: 450px) {
    .article-RSE{
        font-size: 15px;
    }
    /* Image produit */
    .img-produit {
        /* aspect-ratio: 0.9; */
        width: 350px;
        height: auto;
        object-fit: cover;
    }
}