.image-checkout-confirmation {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 150px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 150 / 100; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-checkout-confirmation img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.side-cart-image-container {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 80px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 80 / 90; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.side-cart-image-container img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.cart-image-container {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 225px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 225 / 108; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.cart-image-container img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-container-4 {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 750px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 750 / 375; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-container-4 img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}



.custom-image {
    width: 330px; /* Largeur souhaitée */
    height: 164px; /* Hauteur souhaitée */
    background-color: white; /* Fond blanc */
    object-fit: contain; /* Garde les proportions de l'image */
    overflow: hidden; /* Empêche le dépassement */
}
.modal-image-container {
    width: 395px; /* Largeur souhaitée */
    height: 427px; /* Hauteur souhaitée */
    background-color: white; /* Remplissage blanc */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Pour éviter le dépassement */
}

.modal-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garde les proportions de l'image et la réduit si besoin */
    background-color: white; /* Assure que l'image a un fond blanc */
}

.wishlist-image-container {
    width: 165px; /* Largeur souhaitée */
    height: 82px; /* Hauteur souhaitée */
    background-color: white; /* Remplissage blanc */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Pour éviter le dépassement */
}

.wishlist-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garde les proportions de l'image et la réduit si besoin */
    background-color: white; /* Assure que l'image a un fond blanc */
}

.product-right-slick-image-container {
    width: 330px; /* Largeur souhaitée */
    height: 449px; /* Hauteur souhaitée */
    background-color: white; /* Remplissage blanc */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Pour éviter le dépassement */
}

.product-right-slick-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garde les proportions de l'image et la réduit si besoin */
    background-color: white; /* Assure que l'image a un fond blanc */
}
.slider-right-nav-image-container {
    width: 81px; /* Largeur souhaitée */
    height: 110px; /* Hauteur souhaitée */
    background-color: white; /* Remplissage blanc */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Pour éviter le dépassement */
}

.slider-right-nav-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garde les proportions de l'image et la réduit si besoin */
    background-color: white; /* Assure que l'image a un fond blanc */
}


.image-carousel-1 {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 1920px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 1920 / 718; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-carousel-1 img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-carousel-1-reduced {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 1920px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 1920 / 665; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-carousel-1-reduced img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-carousel-0-reduced {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 1920px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 1920 / 81.85; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-carousel-0-reduced img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}
.image-carousel-10 {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 1920px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 1920 / 300; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-carousel-10 img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-home-categorie {
    width: 100%;
    max-width: 170px;
    aspect-ratio: 170 / 125; /* ratio fixe */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.image-home-categorie img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* garde l'image proportionnelle et ajoute du blanc si nécessaire */
    display: block;
}

.image-home-catalog {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 275px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 275 / 200; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-home-catalog img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-cover-catalog {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 1920px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 1920 / 350; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-cover-catalog img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-carousel-2 {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 672px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 672 / 310; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-carousel-2 img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}
.image-home-brand {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 125px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 125 / 125; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.brand-block {
    display: flex; /* Utiliser Flexbox pour aligner les éléments horizontalement */
    overflow-x: auto; /* Permet de faire défiler si le contenu dépasse la largeur */
    justify-content: center; /* Centrer les éléments horizontalement */
    align-items: flex-start; /* Alignement en haut */
}
.logo-brand-block {
    flex: 0 0 auto; /* Ne pas permettre aux éléments de se réduire et les garder à la taille de leur contenu */
    margin: 10px; /* Ajouter un espacement entre les logos */
    display: flex; /* Utiliser Flexbox pour aligner les éléments dans chaque logo-block */
    flex-direction: column; /* Placer les éléments en colonne */
    align-items: center; /* Centrer horizontalement */
    text-align: center; /* Centrer le texte */
}

.image-home-brand img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-carousel-tl-uk {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 590px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 590 / 834; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-carousel-tl-uk img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-carousel-4 {
    width: 100%; /* Largeur flexible, s'adapte à la taille de l'écran */
    max-width: 1000px; /* Largeur maximale souhaitée pour grand écran */
    aspect-ratio: 1000 / 591; /* Garde le ratio pour que la hauteur s'adapte automatiquement */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.image-carousel-4 img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur via l'aspect-ratio */
    object-fit: contain; /* Garde les proportions de l'image */
    background-color: white;
}

.image-loader-home {
    width: 20%;
    display: block;
    margin: 0 auto;
}

.loader-home {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Couleur de fond avec opacité */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Assure que le loader est en avant-plan */
}


/* Animation des points de suspension */
.loading-dots::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    animation: dots 1s steps(5, end) infinite;
}

/* Keyframes pour l'animation des trois points */
@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/******** Auto Complete Js Plugin *********/
.autoComplete {
    width: 100% !important;
}
.autoComplete-cart {
    width: 100% !important;
}
.input-search-cart input {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid #777777 !important;
    border-radius: 0 !important;
    padding: 20px 0 !important;
    color: black !important;  /* Texte en noir */
}
.input-search-cart input::placeholder {
    color: black !important;  /* Couleur du placeholder en noir */
}

.autoComplete_wrapper {
    display : inline-block;
    position: relative;
    width: 100% !important;
}

.autoComplete_wrapper>input {
    height: auto !important;
    background-image: none !important;

}


.autoComplete_result {
    display: block;
    width: 100%; /* Occupe toute la largeur du conteneur */
    padding: 10px; /* Espacement interne */
    box-sizing: border-box;
    cursor: pointer;
}

.autoComplete_result a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%; /* Le lien prend toute la largeur */
}

.autoComplete_result hr {
    margin: 0; /* Pas d'espace supplémentaire autour du hr */
    border: 0;
    border-top: 1px solid #eaeaea; /* Ligne de séparation légère */
}

.autoComplete_result:hover {
    background-color: var(--theme-default3); /* Changement de fond au survol */
}


.no_result {
    padding: 10px;
    color: #ff0000;
    text-align: center;
    font-weight: bold;
}

/*****************************************/
/***************** SAV FICHE ARTICLE ************/
.product-box-sav {
  transition: box-shadow 0.3s, transform 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
}
.product-box-sav.selected {
  border-color: var(--theme-default);
  box-shadow: var(--theme-default);
  transform: scale(1.02);
}


.bulle {
display: inline-block;
background-color: var(--theme-default); /* couleur de fond */
color: var(--theme-default2);              /* couleur du texte */
padding: 6px 12px;
border-radius: 20px;      /* arrondi de la bulle */
font-weight: bold;
font-size: 8px;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

.shake-animation {
    animation: shake 0.3s ease-in-out;
}
.is-invalid {
    border-color: #dc3545;
}


@media (min-width: 768px) { /* md */
    .col-md-1-5 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}
@media (min-width: 992px) { /* lg */
    .col-lg-1-5 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}


/************************************************/