/* ============================================================================
   COLISBLED - PATCH MOBILE-FIRST UNIVERSEL
   Corrections additionnelles pour garantir 0 débordement sur TOUS les fichiers
   ============================================================================ */

/* ===========================================
   FORCE ANTI-DÉBORDEMENT GLOBAL
   =========================================== */

/* CRITIQUE: Empêche TOUT débordement horizontal, peu importe les autres CSS */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Force tous les conteneurs à respecter la largeur */
.container,
.container-fluid,
.row,
[class*="container"],
main,
section,
article,
div {
    max-width: 100% !important;
}

/* ===========================================
   CORRECTIONS SEARCH.CSS (Mobile-First)
   =========================================== */

/* Hero section responsive */
.hero-section {
    min-height: 50vh !important;
    padding: 2rem 1rem !important;
}

@media (min-width: 768px) {
    .hero-section {
        min-height: 70vh !important;
        padding: 3rem 2rem !important;
    }
}

/* Search container mobile */
.search-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
}

@media (min-width: 768px) {
    .search-container {
        padding: 2rem !important;
    }
}

/* Search grid mobile-first */
.search-results-grid,
.results-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 640px) {
    .search-results-grid,
    .results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .search-results-grid,
    .results-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Filters mobile */
.filters-container {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

.filter-group {
    margin-bottom: 1rem !important;
}

/* ===========================================
   CORRECTIONS RESERVATION-STEP3.CSS
   =========================================== */

/* Steps container mobile */
.steps-container,
.reservation-steps {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.step {
    min-width: auto !important;
    width: 100% !important;
    padding: 1rem !important;
}

@media (min-width: 768px) {
    .step {
        padding: 2rem !important;
    }
}

/* Form steps mobile */
.form-step {
    width: 100% !important;
}

.step-content {
    padding: 1rem !important;
}

@media (min-width: 768px) {
    .step-content {
        padding: 2rem !important;
    }
}

/* ===========================================
   CORRECTIONS ADMIN-DASHBOARD.CSS
   =========================================== */

/* Sidebar responsive */
.admin-sidebar {
    width: 100% !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .admin-sidebar {
        width: 250px !important;
        position: fixed !important;
    }
}

/* Dashboard cards mobile */
.dashboard-card,
.admin-card {
    width: 100% !important;
    padding: 1rem !important;
}

@media (min-width: 768px) {
    .dashboard-card,
    .admin-card {
        padding: 1.5rem !important;
    }
}

/* Dashboard grid mobile-first */
.dashboard-grid,
.admin-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 640px) {
    .dashboard-grid,
    .admin-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .dashboard-grid,
    .admin-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tables responsive */
.admin-table-wrapper,
.table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ===========================================
   CORRECTIONS GLOBALES POUR TOUS LES COMPOSANTS
   =========================================== */

/* Toutes les images */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Tous les boutons mobile */
button,
.btn,
a.btn {
    width: 100% !important;
    min-height: 44px !important;
}

@media (min-width: 768px) {
    button,
    .btn,
    a.btn {
        width: auto !important;
    }
}

/* Tous les forms */
form {
    width: 100% !important;
}

input,
select,
textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Empêche zoom iOS */
}

/* Toutes les modales */
.modal,
.modal-dialog {
    max-width: 100% !important;
    margin: 1rem !important;
}

@media (min-width: 768px) {
    .modal-dialog {
        max-width: 600px !important;
        margin: 2rem auto !important;
    }
}

/* Tous les popovers et tooltips */
.popover,
.tooltip {
    max-width: calc(100vw - 2rem) !important;
}

/* ===========================================
   NAVIGATION MOBILE UNIVERSELLE
   =========================================== */

/* Navbar mobile */
nav,
.navbar,
header {
    width: 100% !important;
}

.navbar-brand img {
    max-height: 40px !important;
}

@media (min-width: 768px) {
    .navbar-brand img {
        max-height: 50px !important;
    }
}

/* Menu mobile */
.navbar-collapse {
    width: 100% !important;
}

.navbar-nav {
    width: 100% !important;
}

@media (max-width: 991px) {
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        text-align: left !important;
    }
}

/* ===========================================
   CARTES UNIVERSELLES
   =========================================== */

/* Toutes les cartes */
[class*="card"],
.card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Headers de cartes */
[class*="card-header"],
.card-header {
    padding: 1rem !important;
}

@media (min-width: 768px) {
    [class*="card-header"],
    .card-header {
        padding: 1.5rem !important;
    }
}

/* Body des cartes */
[class*="card-body"],
.card-body {
    padding: 1rem !important;
}

@media (min-width: 768px) {
    [class*="card-body"],
    .card-body {
        padding: 1.5rem !important;
    }
}

/* ===========================================
   GRILLES UNIVERSELLES BOOTSTRAP
   =========================================== */

/* Bootstrap row */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.col,
[class*="col-"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* ===========================================
   TYPOGRAPHY RESPONSIVE UNIVERSELLE
   =========================================== */

/* Titres */
h1, .h1 {
    font-size: clamp(1.75rem, 5vw, 3rem) !important;
    line-height: 1.2 !important;
}

h2, .h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    line-height: 1.3 !important;
}

h3, .h3 {
    font-size: clamp(1.25rem, 3vw, 2rem) !important;
    line-height: 1.4 !important;
}

h4, .h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.75rem) !important;
}

/* Texte responsive */
p, .text {
    font-size: clamp(0.9375rem, 2vw, 1rem) !important;
}

/* ===========================================
   ESPACEMENTS MOBILE
   =========================================== */

/* Sections */
section {
    padding: 2rem 1rem !important;
}

@media (min-width: 768px) {
    section {
        padding: 3rem 2rem !important;
    }
}

@media (min-width: 1024px) {
    section {
        padding: 4rem 2rem !important;
    }
}

/* ===========================================
   ANIMATIONS ET TRANSITIONS MOBILES
   =========================================== */

/* Réduire les animations sur mobile pour performance */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================================
   FIXES SPÉCIFIQUES iOS/ANDROID
   =========================================== */

/* Empêche zoom double-tap */
* {
    touch-action: manipulation !important;
}

/* Fix input iOS */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0.5rem !important;
}

/* Fix select iOS */
select {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
}

/* ===========================================
   DÉBORDEMENTS SPÉCIFIQUES DÉTECTÉS
   =========================================== */

/* Fix pour les éléments position: absolute qui débordent */
[style*="position: absolute"],
.position-absolute {
    max-width: 100% !important;
}

/* Fix pour les éléments avec transform */
[style*="transform"],
.transform {
    max-width: 100% !important;
}

/* Fix pour les SVG */
svg {
    max-width: 100% !important;
    height: auto !important;
}

/* ===========================================
   PRINT MOBILE
   =========================================== */

@media print {
    html,
    body {
        overflow: visible !important;
        max-width: none !important;
    }
    
    * {
        max-width: none !important;
    }
}

/* ===========================================
   CLASSE UTILITAIRE D'URGENCE
   =========================================== */

/* À utiliser en dernier recours sur un élément qui déborde */
.force-fit {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.force-no-scroll {
    overflow-x: hidden !important;
}

/* ===========================================
   DEBUG MODE (à désactiver en production)
   =========================================== */

/* Décommenter pour voir les éléments qui débordent en rouge */
/*
* {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}

[style*="width"],
[style*="min-width"] {
    outline: 2px solid red;
}
*/