/* ============================================
   CARTES DE THÈMES - Style compact (identique page d'accueil)
   Grille responsive avec image en fond
============================================ */

/* Grille de thèmes - 3 colonnes desktop (identique à categories.php) */
/* Note: Ne pas utiliser !important sur display pour permettre le masquage via JS */
#themes-grid.themes-grid {
    display: none; /* Masqué par défaut, affiché par JS */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px;
}

/* Classe ajoutée par JS après chargement */
#themes-grid.themes-grid.loaded {
    display: grid !important;
}

/* Forcer le masquage complet quand il n'y a pas de résultats */
#themes-grid:empty {
    display: none !important;
}

/* ============================================
   LIEN DE CARTE
============================================ */

#themes-grid .theme-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ============================================
   CARTE PRINCIPALE - Style compact
============================================ */

#themes-grid .theme-card {
    display: flex !important;
    flex-direction: row !important;
    background-color: #1E2A3B !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    height: 160px !important;
    position: relative !important;
    transform: scale(1) !important;
}

.dark-mode #themes-grid .theme-card {
    background-color: var(--card-bg, #1a1a2e) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

#themes-grid .theme-card:hover {
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Hover : scale sur l'image de fond uniquement (desktop) */
@media (min-width: 1025px) {
    #themes-grid .theme-card:hover .theme-card-bg {
        transform: scale(1.1) !important;
    }
}

/* ============================================
   IMAGE DE FOND (sans blur)
============================================ */

#themes-grid .theme-card-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: var(--theme-bg-image) !important;
    background-size: cover !important;
    background-position: center !important;
    transform: scale(1.05) !important;
    z-index: 0 !important;
    transition: transform 0.3s ease !important;
}

/* ============================================
   OVERLAY SOMBRE
============================================ */

#themes-grid .theme-card-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(15, 25, 40, 0.92) !important;
    z-index: 1 !important;
}

/* Overlays colorés par type */
#themes-grid .theme-card.tag-allergenes .theme-card-overlay {
    background: linear-gradient(135deg, rgba(180, 60, 60, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-nutrition .theme-card-overlay {
    background: linear-gradient(135deg, rgba(50, 140, 65, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-temps .theme-card-overlay {
    background: linear-gradient(135deg, rgba(45, 110, 180, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-prix .theme-card-overlay {
    background: linear-gradient(135deg, rgba(180, 150, 30, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-difficulte .theme-card-overlay {
    background: linear-gradient(135deg, rgba(130, 45, 155, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-etapes .theme-card-overlay {
    background: linear-gradient(135deg, rgba(180, 100, 25, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-ustensiles .theme-card-overlay {
    background: linear-gradient(135deg, rgba(20, 130, 150, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-ingredients .theme-card-overlay {
    background: linear-gradient(135deg, rgba(100, 150, 25, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-personnes .theme-card-overlay {
    background: linear-gradient(135deg, rgba(219, 112, 147, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-regimes .theme-card-overlay {
    background: linear-gradient(135deg, rgba(46, 139, 87, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-saisons .theme-card-overlay {
    background: linear-gradient(135deg, rgba(210, 105, 30, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-occasions .theme-card-overlay {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-regions .theme-card-overlay {
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-groupes_age .theme-card-overlay {
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-conditions .theme-card-overlay {
    background: linear-gradient(135deg, rgba(186, 85, 211, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-objectifs .theme-card-overlay {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-popularite .theme-card-overlay {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-recettes .theme-card-overlay {
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}
#themes-grid .theme-card.tag-types_ingredients .theme-card-overlay {
    background: linear-gradient(135deg, rgba(107, 142, 35, 0.3) 0%, rgba(10, 15, 25, 0.8) 100%) !important;
}

/* ============================================
   CONTENU
============================================ */

#themes-grid .theme-card-content {
    flex: 1 !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

#themes-grid .theme-card-title {
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
}

/* ============================================
   RESPONSIVE - Tablettes (769px - 1024px) : 2 colonnes
============================================ */

@media (max-width: 1024px) and (min-width: 769px) {
    #themes-grid.themes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    #themes-grid .theme-card {
        height: 160px !important;
        border-radius: 10px !important;
    }
    
    #themes-grid .theme-card-content {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
}

/* ============================================
   RESPONSIVE - Mobiles (481px - 768px) : 2 colonnes
============================================ */

@media (max-width: 768px) and (min-width: 481px) {
    #themes-grid.themes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    #themes-grid .theme-card {
        height: 140px !important;
        border-radius: 10px !important;
    }

    #themes-grid .theme-card-content {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
}

/* ============================================
   RESPONSIVE - Petits mobiles (321px - 480px) : 2 colonnes
============================================ */

@media (max-width: 480px) and (min-width: 321px) {
    #themes-grid.themes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    #themes-grid .theme-card {
        height: 115px !important;
    }
    
    #themes-grid .theme-card-content {
        padding: 6px 8px !important;
        gap: 5px !important;
    }
}

/* ============================================
   RESPONSIVE - Très petits écrans (320px et moins) : 1 colonne
============================================ */

@media (max-width: 320px) {
    #themes-grid.themes-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #themes-grid .theme-card {
        height: 100px !important;
    }
}