/* ===== MOBILE FIXES - OPTIMISÉS ET CONSOLIDÉS ===== */

/* Base styles - Optimisés pour iOS */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important; /* Safer than 100vw which can cause overflow */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Scrolling fluide sur iOS */
    position: relative !important; /* Aide à contenir les enfants */
}

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

/* Map fixes */
#map-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

#map {
    height: 200px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Filtres */
.filtres {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Solution optimisée pour superposer verticalement les filtres */
.table-header {
    padding: 0 !important;
    background-color: #2196F3 !important;
}

/* Transformation du tableau en layout vertical */
.table-header table,
.table-header thead,
.table-header tr {
    display: block !important;
    width: 100% !important;
}

/* Transformation des cellules en blocs verticaux */
.table-header th {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 10px 10px 5px 10px !important;
    border: none !important;
    box-sizing: border-box !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Optimisation des sélecteurs */
.table-header select.header-filter {
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    padding: 8px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    background-color: white !important;
}

/* Correction du bandeau bleu */
.filtres-container {
    position: relative !important;
    width: 100% !important;
    padding: 10px 5px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background-color: #2196F3 !important;
}

/* Correction des libellés */
.filter-label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 3px !important;
    font-weight: bold !important;
    color: white !important;
}

/* Table content */
.table-content {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Accordion styles - Optimisés pour expérience tactile */
.accordion-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 35px 12px 10px !important; /* Augmenter la zone tactile */
    margin: 5px 0 !important;
    position: relative !important;
    border-radius: 8px !important; /* Amélioration des bordures arrondies */
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* Supprimer highlight iOS */
    touch-action: manipulation !important; /* Optimisation tactile */
    cursor: pointer !important;
}

/* Style visuel pour l'indicateur d'activation */
.accordion-header .toggle-arrow {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
}

/* Rotation de la flèche quand ouvert */
.accordion-header.active .toggle-arrow {
    transform: translateY(-50%) rotate(90deg) !important;
}

/* Contenu d'accordéon avec transition fluide */
.accordion-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 0 0 8px 8px !important;
    display: none !important; /* Force tous les accordéons à être fermés par défaut */
}

/* État actif avec visibilité améliorée */
.accordion-header.active {
    background-color: #e3f2fd !important; /* Fond plus clair quand actif */
    border-bottom: none !important;
}

/* Solutions spécifiques pour la structure TR */
tr.ligne-active .accordion-content,
tr.ligne-active + tr .accordion-content {
    display: block !important;
}

/* Soutien au cas original où les éléments sont adjacents dans le DOM */
.accordion-header.active + .accordion-content {
    display: block !important;
}

/* Correctifs pour le bandeau bleu - Neutralisation du positionnement desktop */
.table-header,
.table-header table,
.table-header th {
  border: none    !important;
  box-shadow: none!important;
}

@media (max-width: 767px) {
  .table-header {
    position: sticky !important;
    top: 0              !important;
    left: 0             !important;
    width: 100%         !important;
    max-width: 100%     !important;
    display: block !important;
    background-color: #2196F3 !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important; /* Pour s'assurer qu'il reste au-dessus du contenu */
  }
  .table-header table,
  .table-header thead,
  .table-header tr,
  .table-header th {
    display: block !important;
    width: 100% !important;
    padding: 5px 10px !important;
    text-align: left !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  .table-header select.header-filter {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 4px 8px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    height: 38px !important;
    border: none !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
  }
}

/* === OVERRIDE MOBILE : empilement et compacité du bandeau de filtres === */
@media (max-width: 767px) {
  .table-header {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 auto !important;
    background-color: #2196F3 !important;
    box-sizing: border-box !important;
  }
  .table-header th {
    display: block !important;
    width: 90% !important;
    margin: 6px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .table-header select.header-filter {
    width: 100% !important;
    padding: 4px 8px !important;
    height: 38px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    border: none !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
  }
  
  /* === MOBILE OVERRIDES : map sticky, filtre sticky, suppression doublons, compactage accordion === */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  
  body.mobile-view {
    padding-top: 320px !important; /* Espace pour les éléments fixed (carte + filtres) */
    box-sizing: border-box !important;
  }
  
  /* Alignement parfait de la carte et du bandeau - OPTIMISÉ */
  #map-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important; /* Utilisation de vw pour garantir la largeur complète */
    max-width: 100vw !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  
  #map {
    width: 100vw !important;      /* Utilisation de vw pour garantir toute la largeur */
    height: 180px !important;
    max-width: 100vw !important;  /* Match parfait avec le bandeau bleu */
    overflow: hidden !important;
    margin: 0 !important;         /* Suppression de toutes les marges */
    border-radius: 0 !important;
    left: 0 !important;          /* Alignement parfait sur les bords */
    right: 0 !important;
  }
  
  /* SOLUTION RADICALE pour la suppression absolue des éléments dupliqués */
  body.mobile-view .filtres,
  body.mobile-view .filtres-container,
  .filtres-container,
  .filtres,
  .container > .filtres-container,
  .container > .filtres,
  body.mobile-view .realisations-container > .filtres,
  html body .filtres-container,
  html body .realisations-container > .filtres,
  div.filtres-container,
  div.filtres,
  *[class*="filtres"],
  *[id*="filtres"],
  .container [class*="filtres"] {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Sélecteur plus spécifique pour garantir les styles du bandeau */
  body.mobile-view .table-header,
  html body.mobile-view #mobile-filters.table-header,
  .table-header,
  #mobile-filters.table-header,
  body .table-header {
    position: fixed !important;
    top: 180px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important; /* HARMONISATION avec la carte */
    max-width: 100vw !important; /* HARMONISATION avec la carte */
    transform: none !important;
    z-index: 900 !important;
    /* Restauration des bords arrondis */
    border-radius: 12px !important; /* CORRECTION : bords arrondis comme demandé */
    overflow: hidden !important;
    margin: 0 !important; /* Suppression des marges pour alignement parfait */
    padding: 8px 0 !important;
    box-sizing: border-box !important;
    background-color: #2196F3 !important;
  }
  
  /* Optimisation des en-têtes de tableau avec spécificité accrue */
  body.mobile-view .table-header th,
  html body.mobile-view #mobile-filters.table-header th {
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 2px auto !important;
    display: block !important;
  }
  
  /* Optimisation des filtres déroulants */
  body.mobile-view .table-header select.header-filter,
  html body.mobile-view #mobile-filters.table-header select.header-filter {
    height: 28px !important;
    padding: 2px 4px !important;
    margin: 2px 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    width: 100% !important;
    border: none !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    color: #333 !important;
  }
  
  /* Correction du positionnement et du défilement du contenu */
  body.mobile-view .mobile-content-wrapper {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Spacer garantissant l'espace pour les éléments fixes */
  body.mobile-view .spacer-for-fixed-elements {
    height: 320px !important; /* Hauteur combinée carte + bandeau */
    display: none !important; /* Masqué car nous utilisons padding-top sur body */
  }
  
  body.mobile-view .table-content {
    position: relative !important; /* Changement de absolute à relative */
    top: 0 !important; /* Ajustement - désormais nous utilisons padding-top sur body */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 800 !important;
  }
  
  /* Optimisation maximale de l'accordéon */
  body.mobile-view .accordion-header {
    padding: 6px 10px !important;
    margin: 2px 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    background-color: #f5f5f5 !important;
    border-radius: 4px !important;
  }
  
  body.mobile-view .accordion-content {
    padding: 5px !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    background-color: #ffffff !important;
    margin: 0 0 5px 0 !important;
    border-radius: 0 0 4px 4px !important;
  }
  
  /* Correction du comportement de défilement et de la largeur */
  body.mobile-view .table-content table,
  body.mobile-view .table-content tr,
  body.mobile-view .table-content td,
  body.mobile-view .realisations-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}
/* === FIN OVERRIDE MOBILE === */