/*------ Debut Override des valeurs Bootstrap ------*/
:root, [data-bs-theme=light] {
  --bs-primary: #00CC66;
  --bs-secondary: #31393F;
  --bs-primary-rgb: 0, 204, 102;
  --bs-secondary-rgb: 49, 57, 63;
  --ar-nav-link-color: var(--ar-gray-300) !important;
}

/*------ Btn color ------*/
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #00CC66;
  --bs-btn-border-color: #00CC66;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00bd5e;
  --bs-btn-hover-border-color: #00b158;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00b158;
  --bs-btn-active-border-color: #04a052;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #00CC66;
  --bs-btn-disabled-border-color: #00CC66;
}

.btn-secondary {
  --ar-btn-color: #fff;
}

.bg-secondary{
    background-color: #31393F !important;
}

/* Fichier: theme.min.css */
.btn-secondary, .btn-light, .card-hover-primary:hover .btn-primary{
    --ar-btn-color: #fff !important;
    --ar-btn-hover-color: #fff !important;
    --ar-btn-active-color: #fff !important;
    --ar-btn-disabled-color: #576071;
}

.nav-item{
    border: 1px solid transparent;
}

.nav-item:hover{
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--bs-primary);
}

.navbar-toggler-icon, .navbar-toggler-icon::after, .navbar-toggler-icon::before{
    background-color: #fff;
}

.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm{
    --ar-offcanvas-box-shadow:  0.4375rem 1.25rem rgba(0, 0, 0, 0.32) !important;
}

/*------ Fin Override des valeurs Bootstrap ------*/

/*------ Début Override des valeurs noUi(Around) ------*/
.noUi-horizontal .noUi-handle{
    top: 2px;
}
/*------ Fin Override des valeurs noUi(Around) ------*/

/* width */
::-webkit-scrollbar {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f100;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* navbar color close button */
.dark-close{
    background: none;
    border: none;
}

/* Laisse la place pour voir la top bar en baissant la navbar -> Voir media query lg */
.navbar-translate{
    transform: translateY(0px);
}

.navbar-stuck{
    transform: translateY(0px) !important;
    background-color: #31393F !important;
}

.btn-nav-color{
    background-color: rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
}

.btn-nav-color:hover{
    background-color: rgba(0, 0, 0, 0.15);
}

.green-line{
    border-bottom: 3px solid #00CC66;
    width: 100%;
    position: absolute;
    transform: translateY(-22px);
    z-index: -1;
}

.card-shadow{
    box-shadow:0px 2px 9px 0px rgba(0,0,0,0.8);
    transform: translateY(0px);
    transition: all 0.3s;
}

.card-shadow:hover{
    box-shadow: 0px 7px 9px 0px rgba(0,0,0,0.8);
    transform: translateY(-5px);
}

.card-shadow-inset{
    box-shadow: inset 0px -2px 8px 0px rgba(0,0,0,0.4);
}

/* Animation de la nav de la page brand / marque */
.nav-brand + div {
    transition: transform 0.5s ease-out;
}

.nav-brand:hover + div {
    transform: translateX(-100%);
}

.nav-brand{
    position: relative;
    display: block;
}

.mobile-padding{
    padding: .75rem 1.25rem;
}

.nav-brand::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-out;
    z-index: -1;
    transform: translateX(100%);
}

.nav-brand:hover::after {
    transform: translateX(0);
}

.content {
    position: relative;
    z-index: 1;
}

.nav-brand:hover + .content {
    transform: translateX(-100%);
}

.nav-icon-link{
    color: #fff;
    transition: all 0.3s;
}

.nav-link:hover .nav-icon-link{
    color: var(--ar-primary);
}

.brand-nav-item .brand-nav-image{
    filter: grayscale(100%);
    transition: all 0.3s;
}

.brand-nav-item:hover .brand-nav-image{
    filter: grayscale(0%);
}

.brand-nav-bg{
    background: rgba(0, 204, 102, 0.18);
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 204, 102, 0.25);
    backdrop-filter: blur(4.6px);
    -webkit-backdrop-filter: blur(4.6px);
    border: 1px solid rgba(0, 204, 102, 0.33);
    height: 650px;
}

.footer-menu > .navbar-nav{
    justify-content: space-between;
    flex-direction: row;
    padding: 0;
}

.footer-menu .nav-item{
    padding: 0 10px 0 10px;
}

.footer-menu .nav-item:hover .nav-link{
    color: var(--ar-primary);
}

footer h3{
    color: var(--ar-primary);
    margin-bottom: 26px;
    font-weight: bold;
}

footer #logo-pneu{
    margin-bottom: 26px;
}

footer .footer-link{
    margin-bottom: 21px;
    font-weight: bold;
}

footer a{
    text-decoration: none;
    color: #fff;
    transition: all 0.3s;
}

footer a:hover{
    color: var(--ar-primary);
}

/*-------- Debut Ajustement (Box: CTA cards)  --------*/

/*assure un layout aligner entre chaque carte*/
.cta-cards-body-size{
    min-width: 250px;
    max-width: 250px;
}

.cta-cards-title-size{
    min-height: 56px;
}

.cta-cards-text-size{
    min-height: 112px;
}

/*-------- Fin Ajustement (Box: CTA cards) --------*/

/* menu mobile */
offcanvas-body-lg{
    display: flex;
}

/* Bouton (search by keyword) */
.btn-black{
    background-color: black;
    color: #fff;
}

.btn-black:hover{
    background-color: rgb(21, 21, 21);
    color: #fff;
}

.footer-link{
    text-decoration: none;
    color: #fff;
}

box-shadow-menu{
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3) !important;
}

.current-search-link{
    color: var(--ar-secondary);
    text-decoration: none;
}

.current-search-link:hover{
    color: var(--ar-primary);
}

.current-search-categorie{
    color: var(--ar-secondary);
    font-weight: bold;
}

/* Container to wrap the cart icon and badge */
.cart-container {
    display: inline-block;
    position: relative;
}

/* Apply the shockwave animation to the container, not the cart icon */
.cart-container.animate-shockwave {
    animation: shockwaveJump 0.8s ease-out;
    position: relative;
}

/* Shockwave effect */
.cart-container.animate-shockwave::before,
.cart-container.animate-shockwave::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: shockwave 1s 0.65s ease-out;
    z-index: -1;
    pointer-events: none;
}

.cart-container.animate-shockwave::before {
    animation: shockwave 1s 0.5s ease-out;
}

/* Prevent badge from moving */
.cart-container .badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%); /* Keeps it at the same spot */
    padding: .25rem .375rem;
}

/* Shockwave bounce effect */
@keyframes shockwaveJump {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.2);
    }
    40% {
        transform: scale(0.85);
    }
    50% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}

/* Expanding shockwave */
@keyframes shockwave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25), inset 0 0 3px rgba(0, 0, 0, 0.25);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5);
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
        box-shadow: 0 0 80px rgba(0, 0, 0, 0);
    }
}


/*------ Debut Media Queries ------*/

/* Bootstrap sm size */
@media screen and (max-width: 576px){

}

/* Bootstrap md size */
@media screen and (max-width: 768px){
    .cta-cards-body-size{
        min-width: none;
        max-width: none;
    }
    .cta-cards-title-size{
        min-height: 0px;
    }

    .cta-cards-text-size{
        min-height: 0px;
    }
}

/* Bootstrap lg size */
@media screen and (max-width: 992px){
    .image-gallery{
        flex-basis: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    .offcanvas-body-lg{
        display: block;
    }
    .navbar-translate{
        transform: translateY(50px);
    }
    .brand-nav-bg{
        border-radius: 0;
        height: auto;
    }
}

/* Bootstrap xl size */
@media screen and (max-width: 1200px){

}

/*------ Fin Media Queries ------*/