/* CSS spécifique pour l'affichage des forfaits sur service-web.php - PRIORITÉ MAXIMALE */

/* Forcer l'affichage de la grille avec 3 colonnes - TOUTES LES VARIATIONS */
.packages-grid-detailed.packages-3,
.package-sub-tab-content .packages-grid-detailed.packages-3,
.package-sub-tab-content.active .packages-grid-detailed.packages-3,
#public-tab .packages-grid-detailed.packages-3,
#public-tab .package-sub-tab-content .packages-grid-detailed.packages-3,
#public-tab .package-sub-tab-content.active .packages-grid-detailed.packages-3,
#prive-tab .packages-grid-detailed.packages-3,
#prive-tab .package-sub-tab-content .packages-grid-detailed.packages-3,
#prive-tab .package-sub-tab-content.active .packages-grid-detailed.packages-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    margin-top: 3rem !important;
    width: 100% !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

/* S'assurer que chaque forfait prend 1/3 de la largeur - TOUTES LES VARIATIONS */
.packages-grid-detailed.packages-3 > .package-detailed,
.package-sub-tab-content .packages-grid-detailed.packages-3 > .package-detailed,
.package-sub-tab-content.active .packages-grid-detailed.packages-3 > .package-detailed,
#public-tab .packages-grid-detailed.packages-3 > .package-detailed,
#public-tab .package-sub-tab-content .packages-grid-detailed.packages-3 > .package-detailed,
#public-tab .package-sub-tab-content.active .packages-grid-detailed.packages-3 > .package-detailed,
#prive-tab .packages-grid-detailed.packages-3 > .package-detailed,
#prive-tab .package-sub-tab-content .packages-grid-detailed.packages-3 > .package-detailed,
#prive-tab .package-sub-tab-content.active .packages-grid-detailed.packages-3 > .package-detailed {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 0 !important;
    box-sizing: border-box !important;
}

/* Forcer l'affichage des contenus de sous-onglets actifs */
.package-sub-tab-content.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.package-sub-tab-content.active .packages-grid-detailed {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* S'assurer que les forfaits sont visibles dans les sous-onglets actifs */
.package-sub-tab-content.active .package-detailed,
#public-tab .package-sub-tab-content.active .package-detailed,
#prive-tab .package-sub-tab-content.active .package-detailed {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive pour les écrans moyens */
@media (max-width: 1200px) {
    .packages-grid-detailed.packages-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Responsive pour les petits écrans */
@media (max-width: 768px) {
    .packages-grid-detailed.packages-3 {
        grid-template-columns: 1fr !important;
    }
}