/* Style de base pour le conteneur des catégories */
.container.category-container {
padding: 20px;
}

/* Style pour la ligne des catégories */
.row.category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

/* Style pour chaque colonne de catégorie */
.column.category {
flex: 1 1 calc(25% - 40px); /* Ajustez la largeur selon le nombre de colonnes souhaité */
max-width: calc(25% - 40px);
margin: 10px;
perspective: 1000px; /* Pour l'effet 3D */
}

/* Style pour la carte de catégorie */
.card.category-card {
margin-top: 60px;
background: #fff;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
cursor: pointer;
position: relative;
}

/* Effet de survol sur la carte */
.card.category-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Style pour l'image de la catégorie */
.category-image {
width: 100%;
height: 200px;
object-fit: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
transition: transform 0.3s ease;
}

/* Effet de zoom sur l'image au survol */
.card.category-card:hover .category-image {
transform: scale(1.1);
}

/* Style pour le titre de la catégorie */
.card.category-card h3 {
margin: 15px 0;
font-size: 1.5em;
color: #333;
transition: color 0.3s ease;
}

/* Changement de couleur du titre au survol */
.card.category-card:hover h3 {
color:rgb(239, 114, 114);
}


/* Animation pour l'apparition des sous-catégories */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.subcategories-container {
animation: fadeIn 0.5s ease forwards;
}
/* Styles de base */
/* body {
    padding-top: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
} */


.dropdown-menu .dropdown-item:hover { background-color: rgba(139, 0, 0, 1) !important; color: #4a4a4a !important; }
.column.product { flex: 0 0 30%; margin: 15px; }
.card { width: 100%; height: 450px; overflow: hidden; transition: transform 0.3s ease; }
.card img { max-height: 200px; width: 100%; object-fit: cover; }
.card h3, .card h2 { font-size: 1.4rem; margin: 10px 0; text-align: center; }
.card:hover { transform: scale(1.05); }
.back { max-height: 400px; overflow-y: auto; padding: 10px; }

/* Pour les écrans larges (à partir de 992px) */
.column.product {
    flex: 0 0 30%; /* Trois colonnes */
    margin: 15px;
}

/* Pour les écrans entre 991px et 769px */
@media (max-width: 991px) and (min-width: 769px) {
    .column.product {
        flex: 0 0 22%; /* Deux colonnes */
        margin: 10px 1%;
    }
}

/* Pour les écrans entre 768px et 576px */
@media (max-width: 768px) {
    .column.product {
        flex: 0 0 48%; /* Deux colonnes */
        margin: 10px 1%;
    }
}

/* Version mobile : pour les petits écrans en dessous de 576px */
@media (max-width: 576px) {
    .column.product {
        flex: 0 0 100%; /* Une seule colonne */
        margin: 10px 0;
    }

    /* Ajustements pour que les images et le texte s'adaptent bien sur mobile */
    .card {
        height: auto;
    }

    .card img {
        height: auto;
        width: 100%; /* Prend toute la largeur du conteneur */
        object-fit: contain;
    }
    .card h3, .card h2 {
        font-size: 1.2rem; /* Ajustement de la taille des titres */
        text-align: center;
    }
    .back h3 {
        font-size: 1rem; /* Taille du texte pour la partie arrière de la carte */
    }
    .card form button {
        font-size: 0.9rem;
        padding: 10px;
        width: 100%; /* Bouton prend toute la largeur */
    }
}


.hidden {
    display: none;
}



/* Conteneur principal */
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

/* Ligne contenant les cartes */
.category-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}

/* Colonnes des cartes */
.column {
flex: 1 1 calc(20% - 10px); /* 5 cartes par ligne avec espace entre elles */
max-width: 150px;
min-width: 120px;
display: flex;
justify-content: center;
}



/* Titre des cartes */
h3 {
margin-top: 10px;
font-size: 1rem;
color: #333;
text-transform: capitalize;
font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
.column {
flex: 1 1 calc(33.33% - 10px); /* 3 cartes par ligne sur tablette */
}
}

@media (max-width: 576px) {
.column {
flex: 1 1 calc(50% - 10px); /* 2 cartes par ligne sur mobile */
}
}
/* Styles de la grille et des colonnes */
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}

.category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}

.column {
flex: 1 1 calc(25% - 30px); /* 4 colonnes */
max-width: calc(25% - 30px);
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
}

.column:hover {
transform: scale(1.05);
}





/* Media queries ajustées */
@media (max-width: 1200px) {
.column.category {
flex: 1 1 280px;
min-width: 260px;
}
}

@media (max-width: 768px) {
.column.category {
flex: 1 1 250px;
min-width: 240px;
}
}

@media (max-width: 576px) {
.column.category {
flex: 1 1 100%;
max-width: 400px; /* Largeur maximale sur mobile */
min-width: 280px;
}
}

/* Nouveau style spécifique pour les colonnes dans subcategories-row */
#subcategories-row .column.category {
flex: 1 1 200px; /* Taille de base plus grande */
max-width: 300px; /* Taille maximale plus grande */
min-width: 200px; /* Taille minimale plus grande */
margin: 10px;
}

#subcategories-row .category-card {
width: 100%;
height: auto;
min-height: 250px;
}

#subcategories-row .category-image {
height: 180px; /* Image plus grande pour les sous-catégories */
}

/* Ajustements responsifs pour les sous-catégories */
@media (max-width: 768px) {
#subcategories-row .column.category {
flex: 1 1 calc(50% - 20px);
min-width: 180px;
}
}

@media (max-width: 576px) {
#subcategories-row .column.category {
flex: 1 1 100%;
max-width: 100%;
min-width: 250px;
}
}

/* Style des catégories principales */
.category-list .column.category {
flex: 1 1 250px;
max-width: 300px;
min-width: 250px;
margin: 15px;
}

.category-list .category-card {
width: 100%;
height: auto;
min-height: 300px;
}

.category-list .category-image {
height: 220px;
}

/* Style des sous-catégories */
#subcategories-row .column.category {
flex: 1 1 250px;
max-width: 300px;
min-width: 250px;
margin: 15px;
}

/* Media queries pour la version responsive */
@media (max-width: 768px) {
.category-list .column.category,
#subcategories-row .column.category {
flex: 1 1 calc(50% - 30px);
min-width: 220px;
}
}

@media (max-width: 576px) {
.category-list .column.category,
#subcategories-row .column.category {
flex: 1 1 100%;
max-width: 100%;
min-width: 280px;
}
}

.logo {
text-align: center;
}

.logo h1 {
font-size: 1.2rem;
margin: 0;
}

.logo p {
font-size: 0.8rem;
margin: 0;
color: #555;
font-style: italic;
}


.icons {
display: flex;
align-items: center;
}

.icons a {
margin-left: 20px;
text-decoration: none;
color: #000;
font-size: 1.2rem;
position: relative;
}

.cart {
position: relative;
}

.cart-count {
position: absolute;
top: -8px;
right: -8px;
background-color: #f00;
color: #fff;
border-radius: 50%;
font-size: 0.8rem;
padding: 2px 6px;
font-weight: bold;
}