/* Styles généraux du conteneur de la grille */
.mycategorygrid-container {
    margin-bottom: 20px; /* Espace sous la grille */
}

/* Ajouter du padding externe quand les espaces internes sont supprimés */
.mycategorygrid-container.with-no-spacing {
    padding: 1px; /* Padding externe pour compenser la suppression des espaces internes */
    box-sizing: border-box;
}

/* Base pour la rangée flexbox, pour les colonnes personnalisées */
.mycategorygrid-container .row {
    display: flex;
    flex-wrap: wrap;
    /* Ces marges négatives compensent les padding des colonnes pour aligner les bords.
       Ajustez-les si votre thème a des valeurs de gouttière différentes. */
    margin-left: -15px; 
    margin-right: -15px;
    /* NOUVEAU: Centre les éléments dans la ligne, utile pour la dernière ligne incomplète */
    justify-content: center;
}

/* Styles pour chaque élément de catégorie */
.mycategorygrid-container .mycat-grid-item {
    margin-bottom: 20px; /* Espacement entre les lignes de catégories */
    /* Padding pour les gouttières est maintenant appliqué directement dans le TPL pour chaque item */

    display: flex; /* Permet au contenu (image + texte) d'être un flex container */
    flex-direction: column; /* Organise l'image et le texte verticalement */
    box-sizing: border-box; /* S'assurer que padding est inclus dans la largeur */
}

/* ========================================
   SYSTÈME RESPONSIVE POUR LES COLONNES
   ======================================== */

/* Les media queries responsive sont maintenant gérées dynamiquement
   dans le template displayHome.tpl en fonction de la configuration
   back-office (colonnes desktop, tablette, mobile) */

/* Styles pour le lien de catégorie pour qu'il prenne toute la place */
.mycategorygrid-container .mycat-grid-item a {
    text-decoration: none;
    display: block; /* Le lien prend toute la largeur du bloc */
    height: 100%; /* Le lien prend toute la hauteur du bloc item */
    color: inherit; /* Hérite de la couleur du texte parent */
}

/* Styles pour l'image wrapper (le conteneur de l'image) */
.mycategorygrid-container .category-image-wrapper {
    width: 100%; /* Le wrapper s'adapte à la largeur de sa colonne Bootstrap / personnalisée */
    padding: 0;
    overflow: hidden; /* Cache toute partie de l'image qui dépasse du border-radius */
    display: flex; /* Pour centrer l'image verticalement dans le wrapper */
    align-items: center;
    justify-content: center;
    /* border-radius et border sont appliqués via le TPL maintenant pour la personnalisation dynamique */
}

/* Styles pour l'image elle-même */
.mycategorygrid-container .category-image {
    max-width: 100%;
    width: 100%; /* L'image prend 100% de la largeur de son conteneur (wrapper) */
    height: 100%; /* TRÈS IMPORTANT : L'image prend 100% de la hauteur de son conteneur (wrapper) */
    display: block;
    object-fit: cover; /* Recouvre le conteneur en conservant les proportions */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Pour les effets de survol */
}

/* Styles pour le nom de la catégorie */
.mycategorygrid-container .category-name {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: var(--mycat-name-font-weight, normal);
    font-size: var(--mycat-name-font-size, 1.2em);
    color: var(--mycat-name-font-color, #333);
}

/* Styles pour le nombre de produits */
.mycategorygrid-container .product-count {
    font-size: var(--mycat-count-font-size, 0.9em);
    color: var(--mycat-count-font-color, #666);
    margin-bottom: 5px;
}

/* Styles pour la description de la catégorie */
.mycategorygrid-container .category-description {
    font-size: var(--mycat-desc-font-size, 0.85em);
    color: var(--mycat-desc-font-color, #777);
    margin-top: 5px;
}

/* Styles pour les ombres (si activées) */
.mycategorygrid-container .mycat-grid-item.with-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Effets de survol (hover) */

/* Transitions gérées via variables CSS plus bas dans le fichier */

/* Effet Zoom */
.mycategorygrid-container .mycat-grid-item.zoom:hover .category-image {
    transform: scale(1.05); /* Zoom léger à 5% */
}

/* Effet Grayscale (Noir & Blanc) */
.mycategorygrid-container .mycat-grid-item.grayscale:hover .category-image {
    filter: grayscale(100%);
}
.mycategorygrid-container .mycat-grid-item.grayscale .category-image {
    filter: grayscale(0%); /* Assurer l'état normal */
}

/* Effet Blur (Flou) */
.mycategorygrid-container .mycat-grid-item.blur:hover .category-image {
    filter: blur(3px); /* Applique un léger flou */
}
.mycategorygrid-container .mycat-grid-item.blur .category-image {
    filter: blur(0px); /* Assurer l'état normal */
}

/* Effet Shadow (Ombre sur le bloc, si non déjà activée par défaut) */
.mycategorygrid-container .mycat-grid-item.shadow:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée au survol */
}
.mycategorygrid-container .mycat-grid-item.shadow {
    transition: box-shadow var(--image-transition-speed, 0.3s) ease-in-out; /* Transition pour l'ombre */
}


/* Effet Rotate */
.mycategorygrid-container .mycat-grid-item.rotate:hover {
    transform: rotate(2deg); /* Légère rotation */
}
.mycategorygrid-container .mycat-grid-item.rotate {
    transition: transform var(--image-transition-speed, 0.3s) ease-in-out; /* Transition pour la rotation */
}

/* Effet Sepia */
.mycategorygrid-container .mycat-grid-item.sepia:hover .category-image {
    filter: sepia(100%);
}
.mycategorygrid-container .mycat-grid-item.sepia .category-image {
    filter: sepia(0%); /* Assurer l'état normal */
}

/* Règle pour s'assurer que les images sont fluides dans les contextes Bootstrap */
.img-fluid, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: middle;
    border-style: none;
}

/* ========================================
   NOUVELLES OPTIONS D'AFFICHAGE AVANCÉES
   ======================================== */

/* --- Suppression des espaces entre images --- */
.mycategorygrid-container .row.no-spacing {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0; /* Supprime l'espace entre les éléments flex */
}

.mycategorygrid-container .mycat-grid-item.no-spacing {
    margin-bottom: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding: 0 !important; /* Force le retrait du padding interne */
}

.mycategorygrid-container .mycat-grid-item.no-spacing .category-image-wrapper {
    border-radius: 0 !important; /* Force les coins carrés quand collé */
}

.mycategorygrid-container .mycat-grid-item.no-spacing .category-image {
    border-radius: 0 !important;
}

/* --- Texte sur l'image --- */
.mycategorygrid-container .category-image-wrapper.text-overlay-enabled {
    position: relative;
}

.mycategorygrid-container .category-overlay-text {
    position: absolute;
    padding: 10px 15px;
    z-index: 2;
    /* L'opacité est maintenant définie directement dans le style inline du template */
    color: #ffffff; /* Texte blanc par défaut sur fond foncé */
}

/* Positionnement du texte selon la classe */
.mycategorygrid-container .position-top-left .category-overlay-text {
    top: 0;
    left: 0;
}

.mycategorygrid-container .position-top-center .category-overlay-text {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.mycategorygrid-container .position-top-right .category-overlay-text {
    top: 0;
    right: 0;
}

.mycategorygrid-container .position-center-left .category-overlay-text {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.mycategorygrid-container .position-center .category-overlay-text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mycategorygrid-container .position-center-right .category-overlay-text {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.mycategorygrid-container .position-bottom-left .category-overlay-text {
    bottom: 0;
    left: 0;
}

.mycategorygrid-container .position-bottom-center .category-overlay-text {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.mycategorygrid-container .position-bottom-right .category-overlay-text {
    bottom: 0;
    right: 0;
}

/* Styles du texte sur l'image */
.mycategorygrid-container .category-overlay-text .category-name {
    margin: 0;
    color: inherit; /* Hérite de la couleur RGBA définie dans le style inline */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Pour améliorer la lisibilité */
}

.mycategorygrid-container .category-overlay-text .product-count {
    color: inherit; /* Hérite de la couleur RGBA définie dans le style inline */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Désactiver l'ombre du texte si l'option est désactivée */
.mycategorygrid-container .no-text-shadow .category-name,
.mycategorygrid-container .no-text-shadow .product-count {
    text-shadow: none !important;
}

/* --- Opacité au survol --- */
.mycategorygrid-container .category-image.hover-opacity {
    transition: opacity var(--image-transition-speed, 0.3s) ease-in-out;
}

.mycategorygrid-container .mycat-grid-item:hover .category-image.hover-opacity {
    opacity: var(--hover-opacity, 0.7);
}

/* Transitions pour tous les effets d'image avec vitesse configurable */
.mycategorygrid-container .mycat-grid-item .category-image {
    transition: transform var(--image-transition-speed, 0.3s) ease-in-out,
                filter var(--image-transition-speed, 0.3s) ease-in-out,
                opacity var(--image-transition-speed, 0.3s) ease-in-out;
}

/* --- Soulignement dynamique (nouvelle version avec ligne initiale) --- */
.mycategorygrid-container .category-name.hover-underline {
    position: relative;
    display: inline-block;
    padding-bottom: var(--underline-spacing, 5px); /* Espacement configurable */
}

.mycategorygrid-container .category-name.hover-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--underline-initial-width, 30%);
    height: var(--underline-thickness, 2px); /* Épaisseur configurable */
    background-color: var(--underline-color, currentColor);
    transition: width var(--text-transition-speed, 0.3s) ease-in-out;
}

.mycategorygrid-container .category-link:hover .category-name.hover-underline::after {
    width: 100%;
}

/* Assure que le lien prend toute la place et gère bien les transitions */
.mycategorygrid-container .category-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}