/* CSS pour éliminer les espaces blancs et utiliser toute la largeur de l'écran */

/* Reset global pour éliminer tout espace indésirable */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Container principal qui force l'utilisation de toute la largeur */
.min-h-screen {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Main content sans marges/padding */
main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Navigation full-width */
nav, .nav-premium {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Container navigation optimisé */
.nav-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: clamp(1rem, 2vw, 2rem) !important;
    padding-right: clamp(1rem, 2vw, 2rem) !important;
}

/* Bootstrap containers sans marges */
.container, .container-fluid {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Containers internes avec padding controlé */
.container-fluid.custom-padding {
    padding-left: clamp(0.5rem, 2vw, 2rem) !important;
    padding-right: clamp(0.5rem, 2vw, 2rem) !important;
}

/* Rows Bootstrap sans marges negatives */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Colonnes avec gutter contrôlé */
.col, [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x, 1rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 1rem) * 0.5) !important;
    max-width: 100% !important;
}

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

.hero-section .container, 
.hero-section .container-fluid {
    padding-left: clamp(1rem, 3vw, 3rem) !important;
    padding-right: clamp(1rem, 3vw, 3rem) !important;
}

/* Content sections avec padding adaptatif */
.search-results-section,
.facilities-section,
.content-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(0.5rem, 2vw, 2rem) !important;
    padding-right: clamp(0.5rem, 2vw, 2rem) !important;
}

/* Map container full-width */
.map-container, 
#map {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Cards et éléments de grille optimisés */
.facility-card,
.search-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

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

/* Mobile optimizations */
@media (max-width: 768px) {
    .container-fluid.custom-padding {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .nav-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .hero-section .container,
    .hero-section .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .search-results-section,
    .facilities-section,
    .content-section {
        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;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .container-fluid.custom-padding {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .nav-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .search-results-section,
    .facilities-section,
    .content-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Large screens optimization */
@media (min-width: 1200px) {
    .container-fluid.custom-padding {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    .nav-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    .search-results-section,
    .facilities-section,
    .content-section {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Force remove scrollbar on specific elements */
.no-scroll {
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.no-scroll::-webkit-scrollbar {
    display: none !important;
}

/* Specific fixes for common problematic elements */
.dropdown-menu,
.modal,
.popover,
.tooltip {
    max-width: calc(100vw - 2rem) !important;
}

/* Tables responsive without horizontal scroll */
.table-responsive {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Form elements full-width */
.form-control,
.form-select,
.input-group {
    width: 100% !important;
    max-width: 100% !important;
}

/* Utility classes for edge cases */
.w-full {
    width: 100% !important;
    max-width: 100% !important;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.full-width-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Content wrapper with controlled padding */
.content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(0.5rem, 2vw, 2rem) !important;
}

/* Special handling for RTL layouts */
[dir="rtl"] .container,
[dir="rtl"] .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

[dir="rtl"] .row {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Print styles - maintain full width */
@media print {
    * {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* High contrast mode compatibility */
@media (prefers-contrast: high) {
    .container,
    .container-fluid,
    .row,
    .col,
    [class*="col-"] {
        outline: none !important;
        border: none !important;
    }
}

/* Reduced motion - maintain layout stability */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
    }
}