/* CSS de correction pour l'espacement des installations sportives */

/* Reset global spécifique aux installations */
.facilities-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Hero section full-width */
.hero-section {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Container fluid avec padding adaptatif */
.container-fluid.with-padding {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: clamp(0.5rem, 2vw, 2rem) !important;
    padding-right: clamp(0.5rem, 2vw, 2rem) !important;
}

/* Search results section full-width */
.search-results-section {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Map container optimisé */
.map-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#map {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Grille des installations */
.facilities-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    --bs-gutter-x: clamp(0.5rem, 1.5vw, 1.5rem) !important;
}

/* Cards des installations */
.facility-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.search-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container-fluid.with-padding {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .facilities-grid {
        --bs-gutter-x: 0.5rem !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .search-results-section {
        padding: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .container-fluid.with-padding {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .facilities-grid {
        --bs-gutter-x: 0.25rem !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .container-fluid.with-padding {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/**
 * CSS de correction pour optimiser l'espacement des cartes d'installations
 * et éliminer l'espace blanc inutile
 */

/* Optimisation globale de l'espace */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.container-fluid {
    max-width: 100vw !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

/* Grille des cartes optimisée */
.facilities-grid {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.facilities-grid > .col {
    padding-right: 8px !important;
    padding-left: 8px !important;
    margin-bottom: 16px !important;
}

/* Cartes d'installations avec espacement optimisé */
.facility-card {
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    overflow: hidden !important;
}

.facility-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(44, 90, 160, 0.15) !important;
}

/* Image des installations */
.facility-image {
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
}

/* Optimisation responsive */
@media (max-width: 1400px) {
    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20% !important;
    }
}

@media (max-width: 1200px) {
    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25% !important;
    }
    
    .container-fluid {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
}

@media (max-width: 992px) {
    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.333333% !important;
    }
    
    .facilities-grid > .col {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

@media (max-width: 768px) {
    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50% !important;
    }
    
    .container-fluid {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    
    .facilities-grid > .col {
        padding-right: 4px !important;
        padding-left: 4px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 576px) {
    .facilities-grid > .col {
        padding-right: 3px !important;
        padding-left: 3px !important;
        margin-bottom: 10px !important;
    }
    
    .container-fluid {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }
    
    .facility-card {
        border-radius: 12px !important;
    }
}

/* Section des résultats */
.search-results-section {
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 16px !important;
}

/* Correction du padding pour les cartes */
.card-body {
    padding: 0.875rem !important;
}

/* Correction de la hauteur des images */
.facility-image {
    height: 180px !important;
    min-height: 180px !important;
}

/* Optimisation des badges de prix */
.price-badge {
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Style pour les étoiles de notation */
.rating-stars {
    font-size: 0.875rem !important;
}

/* Amélioration des boutons */
.btn {
    border-radius: 10px !important;
    font-weight: 500 !important;
}

/* Correction pour éliminer tout espace blanc sur les côtés */
.row {
    --bs-gutter-x: 1rem !important;
}

@media (max-width: 768px) {
    .row {
        --bs-gutter-x: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .row {
        --bs-gutter-x: 0.5rem !important;
    }
}