html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    padding-top: 8rem; /* fixed-top navbar */
    scroll-behavior: smooth;
}

@media (max-width: 576px) { /* sm=mobile */
    body {
        padding-top: 4rem; /* fixed-top navbar */
    }
    .navbar-brand img {
        max-width: 200px;
    }
} 

/* overwrite bs styles */

h1 {
    font-weight: 400!important;
    font-size: 2rem;
    color: var(--bs-body-color);
}

h2, h3 {
    font-size: 1.25rem;
}

.btn-primary, .btn-primary:focus, .btn-primary:active {
    background-color: var(--bg-site);
    border-color: var(--bg-site);
    color: var(--text-site) !important;
    text-decoration:none;
}

.btn-primary:hover {
    background-color: var(--text-site);
    border-color: var(--bg-site) !important;
    color: var(--bg-site) !important;
    text-decoration:none;
}

.btn-secondary, .btn-secondary:hover {
    color: var(--bs-light) !important;
    background-color: var(--bs-secondary) !important;
}

.bg-site {
    background-color: var(--bg-site);
}

.textmenu1, a.textmenu1, a:hover.textmenu1, a:active.textmenu1 {
    color: var(--text-site) !important;
}
.bgmenu2 {
    background-color: var(--bg-menu-site);
}
.textmenu2, a.textmenu2, a:hover.textmenu2, a:active.textmenu2 {
    color: var(--text-menu-site) !important;
    border-radius: 50rem;
}
a:hover.textmenu2 {
    color: var(--text-menu-hover-site) !important;
    background-color: var(--bg-menu-hover-site);
    border-radius: 50rem;
}
main a, main a:hover, main a.card-site {
    color: var(--link-site) !important;
}
a:hover {
    text-decoration: none;
}
.footer, .footer a, a:hover.footer, a:active.footer {
    color: var(--text-foot-site);
    background-color: var(--bg-foot-site);
}
.footer h5 {
    color: var(--text-foot-site);
}

.mini-footer
    {
    text-align: center;
    font-size: 9px;
    padding-top: 20px;
    border-top: 1px solid rgb(73, 73, 73);
    }

.offcanvas-body a {
    color: var(--link-site);
}
.offcanvas-body a:hover {
    background-color:#ddd;
}

/* controls div h scrollable */
.btn-control {
    color:rgb(56, 56, 56) !important;
    padding:3px;
}
.btn-control.disabled {
    color:#ccc !important;
}

/* top-page */
#top-page {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    transition: all 0.3s ease-in-out 0s;
    animation: fadeIn 1s;
    background-color:var(--bg-site);
    color: var(--text-site);
    padding: 10px 20px !important;
    border-radius: 50px;
    transition: 0.3s;
    }      
#top-page:hover {
    background-color: #555;
    }
            
/* captcha img */
.col-captcha_img img {
    border:1px solid #ccc;
    border-radius: 4px;
    }
.grecaptcha-badge {
        display: none;
    }
    
/* misc */
.card-produit:hover, 
a.card-site:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    border-color: #ccc!important;
    }

li.breadcrumb-item.active {
    color:#000;
    }

/* fiche produit */

h1.produit-titre {
    font-size: 1.25rem;
}

h2.produit-autres, 
h2.produit-description , 
h2.produit-caracteristiques {
    font-size: 1.25rem;
}

.card-produit-titre {
    font-size: 14px;
}

#image {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition:    all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition:  all .25s ease-in-out;
            transition: all .25s ease-in-out;

}

#image:hover {
    -webkit-transform:    scale(0.93);
        -moz-transform:   scale(0.93);
        -ms-transform:    scale(0.93);
            -o-transform: scale(0.93);
            transform:    scale(0.93);
}   

/* diaporama */
.carousel-indicators > button{
    height:10px !important;
    width:10px !important;
    border-radius: 50rem !important;
    background-color: #fff;
    }
.carousel-control-next:hover > i, 
.carousel-control-prev:hover > i {
    background-color: #fff;
    padding:3px;
    border-radius: 50rem !important;
    }
.carousel-caption {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    }

/* accordion */
.accordion-button:not(.collapsed) {
    color: #000;
    background-color: transparent;
}

/* multi menu */
.dropdown-menu li {
    position: relative;
    }
.dropdown-menu .submenu { 
    display: none;
    position: absolute;
    left:100%; 
    top:0;
    }
.dropdown-menu .submenu-left { 
    right:100%; left:auto;
    }
.dropdown-menu > li:hover {
    background-color: #f1f1f1;
    }
.dropdown-menu > li:hover > .submenu {
    display: block;
    }

/* sidebar offcanvas (mobile) */
.offcanvas-header {
    background-color: rgba(0,0,0,.03);
    }

/* panier */
.panier .card-header {
    background-color: var(--bg-site);
    color:var(--text-site);
 }

.panier .radio-description {
    margin-left:25px;
}
.panier .list-group-item {
    cursor: pointer;
}
.panier .list-group-item:hover, .panier .list-group-item:hover label {
    background-color: var(--bs-gray-100);
}

/* ribbons */
.ribbon {
    position: absolute;
    right: -5px; top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px; height: 75px;
    text-align: right;
    }

.ribbon-red span {
    color: #FFF;
    background-color: var(--bs-danger);
    /* background: linear-gradient(#c90d51 0%, #a70a0a 100%); */
    }

.ribbon-green span {
    color: #FFF;
    background-color: var(--bs-success);
    /* background: linear-gradient(#97bb42 0%, #79A70A 100%); */
    }

.ribbon-yellow span {
    color: #000;
    background-color: var(--bs-warning);
    /* background: linear-gradient(rgb(216, 216, 72) 0%,yellow 100%); */
    }

.ribbon span {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100px;
    display: block;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
    }

.ribbon-red span::before {
    border-left: 3px solid var(--bs-danger);
    border-top: 3px solid var(--bs-danger);
    }

.ribbon-green span::before {
    border-left: 3px solid var(--bs-success);
    border-top: 3px solid var(--bs-success);
    }

.ribbon-yellow span::before {
    border-left: 3px solid var(--bs-warning);
    border-top: 3px solid var(--bs-warning);
    }

.ribbon span::before {
    content: "";
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    }

.ribbon-red span::after {
    border-right: 3px solid var(--bs-danger);
    border-top: 3px solid var(--bs-danger);
    }

.ribbon-green span::after {
    border-right: 3px solid var(--bs-success);
    border-top: 3px solid var(--bs-success);
    }

.ribbon-yellow span::after {
    border-right: 3px solid var(--bs-warning);
    border-top: 3px solid var(--bs-warning);
    }

.ribbon span::after {
    content: "";
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    }

/* environnement info */
.env-info {
    cursor: default;
    position: fixed;
    width: auto;
    top:0;
    right:0;
    padding:0 5px;
    line-height: 13px;
    color: #f0f0f0;
    background-color: #d9534f;
    font-size: 12px;
    opacity: .65;
    z-index: 99000;
    }